webpack5 打包环境抽离分环境基本配置

• 两种开发模式
  • 开发模式：代码能编译自动化运行
  • 生产模式：代码编译优化输出
• Webpack 基本功能
  • 开发模式：可以编译 ES Module 语法
  • 生产模式：可以编译 ES Module 语法，压缩 js 代码
• Webpack 配置文件
• 5 个核心概念
  • entry
  • output
  • loader
  • plugins
  • mode
• devServer 配置
  • webpack 直接打包输出
  • webpack serve 启动开发服务器，内存编译打包没有输出

仓库代码:

https://gitee.com/zhouyunfang_admin/webpack5-base/tree/webpack-base/https://gitee.com/zhouyunfang_admin/webpack5-base/tree/webpack-base/ 

生产环境路径D:\myProject\webpack5\webpack5-demo\config\webpack.prod.js

// 生产环境 npx webpack --config ./config/webpack.pro.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
// https://webpack.docschina.org/plugins/mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//eslint文档 https://webpack.docschina.org/plugins/eslint-webpack-plugin/
const ESLintPlugin = require("eslint-webpack-plugin");
const path = require("path");
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader, //单独生成css文件
    "css-loader", //将css资源编译成commonjs的模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean); //过滤掉preProcessor为undefined值
};
 
// webpack都是在nodejs平台运行所以要用到node语法
module.exports = {
  // 入口 (相对路径)
  entry: "./src/main.js",
  // 输出
  output: {
    // 文件输出路径
    path: path.resolve(__dirname, "../dist"),
    // 入口文件打包输出文件名
    filename: "static/js/main.js",
    clean: true, //webpack5特性打包前清除上一次打包记录
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/, //只检测.css文件
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        // use与loader的区别,use可以用多个loader;loader只能用一个(loader:'xxxx')
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/, //a和c结尾的文件都行(sass|scss)
        use: getStyleLoaders("sass-loader"),
      },
      // https://webpack.docschina.org/guides/asset-modules/#resource-assets
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/, //$匹配结尾，在多行检测中，会匹配一行的结尾
        type: "asset", //转base64
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片转为base64,用于减少请求数据,但体积会大一点点
          },
        },
        generator: {
          // 生成输出的图片名字[hash:10]表示只取前10位
          // ext:扩展名
          // query图片参数
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?|mp3|mp4|avi)$/, //匹配字体图标库或者视频文件
        type: "asset/resource", //resource对文件原样的输出
        generator: {
          //输出media名称
          filename: "static/media/[hash:10][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/, //排除node_modules不做js转换处理
        use: {
          loader: "babel-loader",
          // options: {options配置可以写到babel.config.js文件中好维护
          //   presets: ["@babel/preset-env"],
          // },
        },
      },
    ],
  },
  // 插件
  plugins: [
    new ESLintPlugin({
      //context指定文件根目录，类型为字符串(检查src下的文件)
      context: path.resolve(__dirname, "../src"),
    }),
    /*
    https://webpack.docschina.org/plugins/html-webpack-plugin/
    该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
    */
    // new HtmlWebpackPlugin()会将原来的结构覆盖生成一个新的文件
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    //  提取css成单独文件
    new MiniCssExtractPlugin({
      // 针对css打包后放置指定路径
      filename: "static/css/main.css",
    }),
    // css压缩
    new CssMinimizerPlugin(),
  ],
 
  // 模式
  mode: "production",
};

开发环境配置路径D:\myProject\webpack5\webpack5-demo\config\webpack.dev.js

// 开发环境 运行模式npx webpack serve --config ./config/webpack.dev.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
//eslint文档 https://webpack.docschina.org/plugins/eslint-webpack-plugin/
const ESLintPlugin = require("eslint-webpack-plugin");
// webpack都是在nodejs平台运行所以要用到node语法
module.exports = {
  // 入口 (相对路径)
  entry: "./src/main.js",
  // 输出
  output: {
    // 文件输出路径(开发模式下没有输出)
    path: undefined,
    // 入口文件打包输出文件名
    filename: "static/js/main.js",
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/, //只检测.css文件
        use: [
          //执行顺序,从右到左(从下到上)
          "style-loader", //将js中css通过创建style标签添加到html中动态生效
          "css-loader", //将css资源编译成commonjs的模块到js中
        ],
      },
      {
        test: /\.less$/,
        // use与loader的区别,use可以用多个loader;loader只能用一个(loader:'xxxx')
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/, //a和c结尾的文件都行(sass|scss)
        use: [
          // 将 JS 字符串生成为 style 节点
          "style-loader",
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
      // https://webpack.docschina.org/guides/asset-modules/#resource-assets
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/, //$匹配结尾，在多行检测中，会匹配一行的结尾
        type: "asset", //转base64
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片转为base64,用于减少请求数据,但体积会大一点点
          },
        },
        generator: {
          // 生成输出的图片名字[hash:10]表示只取前10位
          // ext:扩展名
          // query图片参数
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?|mp3|mp4|avi)$/, //匹配字体图标库或者视频文件
        type: "asset/resource", //resource对文件原样的输出
        generator: {
          //输出media名称
          filename: "static/media/[hash:10][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/, //排除node_modules不做js转换处理
        use: {
          loader: "babel-loader",
          // options: {options配置可以写到babel.config.js文件中好维护
          //   presets: ["@babel/preset-env"],
          // },
        },
      },
    ],
  },
  // 插件
  plugins: [
    //plugins的配置
    new ESLintPlugin({
      //context指定文件根目录，类型为字符串(检查src下的文件)
      context: path.resolve(__dirname, "../src"),
    }),
    /*
    https://webpack.docschina.org/plugins/html-webpack-plugin/
    该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
    */
    // new HtmlWebpackPlugin()会将原来的结构覆盖生成一个新的文件
    new HtmlWebpackPlugin({
      /**
       * 模板以public/index.html文件创建新的html文件,
       * 新的html文件特点:
       * 结构和原来的一致
       * 自动引入打包输出的资源
       */
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  // 模式
  mode: "development", //设置为开发  mode: "development |production ",
};

package.json文件配置启动环境

  "scripts": {
    "start": "npm run dev",
    "dev": "webpack server --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  },