1、开发体验优化

（1）sourceMap优化调试

• **场景：**经过webpack打包后的代码无法进行调试
• **介绍：**SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案
• webpack配置：

  • 开发模式：cheap-module-source-map

    module.exports = {
      // 其他省略
      mode: "development",
      devtool: "cheap-module-source-map",
    };
    

    • 优点：打包编译速度快，只包含行映射
    • 缺点：没有列映射

  • 生产模式：source-map

    module.exports = {
      // 其他省略
      mode: "production",
      devtool: "source-map",
    };
    

    • 优点：包含行/列映射
    • 缺点：打包编译速度更慢

2、提升打包构建速度

（1）HMR

• **场景：**开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。
• **介绍：**HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。
• 配置：

  • 基本配置：

    module.exports = {
      // 其他省略
      devServer: {
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
        hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
      },
    };
    

    此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。 但是 js 还不行。

  • JS 配置：

    // main.js
    import count from "./js/count";
    import sum from "./js/sum";
    // 引入资源，Webpack才会对其打包
    import "./css/iconfont.css";
    import "./css/index.css";
    import "./less/index.less";
    import "./sass/index.sass";
    import "./sass/index.scss";
    import "./styl/index.styl";
    
    const result1 = count(2, 1);
    console.log(result1);
    const result2 = sum(1, 2, 3, 4);
    console.log(result2);
    
    // 判断是否支持HMR功能
    if (module.hot) {
      module.hot.accept("./js/count.js", function (count) {
        const result1 = count(2, 1);
        console.log(result1);
      });
    
      module.hot.accept("./js/sum.js", function (sum) {
        const result2 = sum(1, 2, 3, 4);
        console.log(result2);
      });
    }
    

    这样写很麻烦，实际开发我们会使用其他 loader 来解决：vue-loader, react-hot-loader。

（2）OneOf

• **场景：**打包时每个文件都会经过所有 loader 处理，虽然因为 test 正则原因实际没有处理上，但是都要过一遍。比较慢。

• **介绍：**顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了。

• 配置：

  const path = require("path");
  const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  
  module.exports = {
    module: {
      rules: [
        {
          oneOf: [
            {
              // 用来匹配 .css 结尾的文件
              test: /\\.css$/,
              // use 数组里面 Loader 执行顺序是从右到左
              use: ["style-loader", "css-loader"],
            },
            {
              test: /\\.less$/,
              use: ["style-loader", "css-loader", "less-loader"],
            },
            {
              test: /\\.s[ac]ss$/,
              use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
              test: /\\.styl$/,
              use: ["style-loader", "css-loader", "stylus-loader"],
            },
            {
              test: /\\.js$/,
              exclude: /node_modules/, // 排除node_modules代码不编译
              loader: "babel-loader",
            },
          ],
        },
      ],
    },
    mode: "development",
  };
  

（3）Include/Exclude

• **场景：**开发时我们需要使用第三方的库或插件，所有文件都下载到 node_modules 中了。而这些文件是不需要编译可以直接使用的。所以我们在对 js 文件处理时，要排除 node_modules 下面的文件。

• 介绍：

  • include：包含，只处理 xxx 文件
  • exclude：排除，除了 xxx 文件以外其他文件都处理

• 配置：

  const path = require("path");
  const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  
  module.exports = {
    module: {
      rules: [
        {
          oneOf: [
  					// ...
            {
              test: /\\.(ttf|woff2?)$/,
              type: "asset/resource",
              generator: {
                filename: "static/media/[hash:8][ext][query]",
              },
            },
            {
              test: /\\.js$/,
              // exclude: /node_modules/, // 排除node_modules代码不编译
              include: path.resolve(__dirname, "../src"), // 也可以用包含
              loader: "babel-loader",
            },
          ],
        },
      ],
    },
    plugins: [
      new ESLintWebpackPlugin({
        // 指定检查文件的根目录
        context: path.resolve(__dirname, "../src"),
        exclude: "node_modules", // 默认值
      })
    ],
    mode: "development",
  };
  

（4）Cache