Webpack 5 核心机制详解与打包性能优化实践

🤖 作者简介：水煮白菜王，一个web开发工程师 👻
👀 文章专栏： 前端专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。
感谢支持💕💕💕

Webpack 5 相较于 Webpack 4 的主要改进

1. 性能改进：webpack5在构建速度和打包体积方面进行了一些优化。它引入了持久缓存，可以减少构建时间。
   此外，webpack5还引入了更好的树摇（tree shaking）算法，可以更好地优化打包体积。
2. 模块联邦（Module Federation）新增特性：这是webpack5中最重要的新功能之一。模块联邦允许不同的应用程序共享模块，从而实现更好的代码复用和拆分。这对于构建大型的微服务架构非常有用。

new ModuleFederationPlugin({
  name: 'myApp',
  filename: 'remoteEntry.js',
  remotes: {},
  exposes: {
    './Button': './src/Button',
  },
  shared: { react: { singleton: true } },
});

4. 支持WebAssembly：webpack5对WebAssembly提供了更好的支持。它可以直接导入和导出WebAssembly模块，并且可以通过配置进行优化。
5. 缓存策略增强：webpack5引入了更好的缓存策略，可以更好地利用浏览器缓存。这可以减少用户在更新应用程序时需要下载的文件数量。
6. Tree Shaking 改进：webpack5引入了更好的Tree Shaking算法，可以更好地识别和删除未使用的代码。这可以进一步减少打包体积。
7. 改进的持久缓存：webpack5引入了更好的持久缓存策略，可以更好地利用缓存。这可以减少构建时间。

其中最显著的变化是 webpack5 引入了持久化缓存机制，使得构建速度大幅提升。此外，webpack5 改进了长期缓存策略，支持更好的 Tree Shaking 和代码分割功能

安装

npm init -y     // 初始化package.json
npm install webpack webpack-cli --save-dev

npx webpack --watch     // 监听文件修改
npx webpack-dev-server  // 以server的方式启动项目，不会打包物理文件，而是输出到内存

生命周期

Compiler Hooks

beforeRun：在webpack开始运行之前调用，执行全局初始化逻辑，例如异步加载配置、插件依赖项等。

run：在webpack开始运行时调用，可以在此做一些全局处理 ，一些初始化操作。

beforeCompile：在webpack开始编译之前调用，修改编译参数、注入额外上下文。

compile：在webpack开始编译时调用，初始化与本次编译相关的状态。

make：在webpack开始构建编译器时调用，启动模块解析、构建等操作，可在此阶段添加自定义入口点或资源。

afterCompile：在webpack完成编译之后调用，获取完整的模块依赖图，进行最终分析或优化。

emit：在webpack生成最终的资源之前调用，添加、修改或删除最终输出的资源（如生成额外文件）。

afterEmit：在webpack生成最终的资源之后调用，做一些清理工作或触发后续流程。

done：在webpack完成构建之后调用，清理临时资源、输出构建信息、发送通知。

use hooks

module.exports = {
  // ...
  plugins: [
    {
      apply: (compiler) => {
        compiler.hooks.beforeRun.tap('MyPlugin', () => {
          console.log('Before run');
        });

        compiler.hooks.done.tap('MyPlugin', () => {
          console.log('Build done');
        });
      }
    }
  ]
};

//在这个示例中，我们定义了一个自定义插件，并利用beforeRun和done两个生命周期钩子函数。在这些钩子函数中，我们可以实现自定义行为，如输出日志信息。

webpack中的loader（转换器）

工作原理

webpack loader 在 webpack 构建过程中的生命周期中的工作主要分为以下几个阶段：

• 解析阶段：webpack 会根据配置文件中的入口文件，递归解析所有的依赖模块。在这个阶段，webpack 会根据文件的后缀名来确定使用哪个 loader 来处理该文件。

• 编译阶段：在这个阶段，webpack 会将解析后的模块转换成 AST（抽象语法树），并且根据配置文件中的规则，将模块中的代码进行转换和处理。
  这个阶段是 loader 的主要工作阶段，loader 可以对模块进行各种处理，例如转换代码、添加额外的功能等。

• 生成阶段：在这个阶段，webpack 会根据处理后的模块生成最终的输出文件。输出文件的格式和路径可以通过配置文件进行配置。

在这些阶段中，loader 主要在编译阶段发挥作用。loader 可以通过导出一个函数来定义自己的处理逻辑，这个函数接收一个参数，即待处理的模块的源代码，然后返回处理后的代码。

常用loader

以下是一些常用的webpack loader：

自定义loader

// 核心代码：

function clearConsoleLoader(source) {
  // 使用正则表达式匹配并替换console语句
  const modifiedSource = source.replace(/console\.[a-z]+\(.+\);?/g, '');

  return modifiedSource;
}

module.exports = clearConsoleLoader;

//使用
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          './path/to/clearConsoleLoader.js'
        ]
      }
    ]
  }
};

webpack中的plugins（插件）

工作原理

webpack 插件是用来扩展 webpack 功能的工具，它可以在 webpack 构建过程中的不同阶段执行一些额外的操作。

插件的工作原理是通过在 webpack 的构建过程中的不同生命周期中注册一些钩子函数，然后在对应的阶段执行这些钩子函数中的逻辑。

webpack 的构建过程中有以下几个生命周期：

• 初始化阶段：在这个阶段，webpack 会初始化配置参数，加载插件，并准备开始编译。

• 编译阶段：在这个阶段，webpack 会从入口文件开始递归解析所有的依赖模块，并将模块转换成 AST（抽象语法树），然后根据配置文件中的规则进行转换和处理。

• 完成编译阶段：在这个阶段，webpack 已经完成了所有的模块的转换和处理，并且生成了最终的输出文件。

• 输出阶段：在这个阶段，webpack 会将生成的输出文件写入到磁盘上。

插件可以在这些生命周期中的任意阶段注册对应的钩子函数，并在钩子函数中执行一些额外的操作。

自定义plugins

class MyPlugin {
  apply(compiler) {
    // 注册初始化阶段的钩子函数
    compiler.hooks.initialize.tap('MyPlugin', () => {
      console.log('MyPlugin initialized');
    });

    // 注册编译阶段的钩子函数
    compiler.hooks.compile.tap('MyPlugin', () => {
      console.log('MyPlugin compiling');
    });
  }
}

module.exports = MyPlugin;

// 使用

const MyPlugin = require('./my-plugin');

module.exports = {
  // ...
  plugins: [
    new MyPlugin(),
  ],
};

打包过程

• 读取配置文件：Webpack会首先读取配置文件，根据配置文件中的入口、出口等信息进行打包。

• 解析模块依赖：Webpack会从指定的入口文件开始递归解析所有的模块依赖，直到找到所有的模块。

• 加载器处理：对于不同类型的模块，Webpack会使用相应的加载器对其进行处理。例如，对于JavaScript模块，Webpack会使用Babel加载器将ES6语法转换为ES5语法；对于CSS模块，Webpack会使用CSS加载器将CSS代码打包进JS文件中。

• 插件处理：在模块加载完成之后，Webpack会执行一系列插件，用于完成一些额外的任务，例如生成HTML文件、提取CSS文件等。

• 编译打包：Webpack将经过处理的模块和插件生成最终的打包文件。通常情况下，Webpack会生成一个或多个JavaScript文件，同时也可以生成其他类型的文件，例如CSS、图片等。

• 输出打包文件：Webpack将生成的打包文件输出到指定的目录中。通常情况下，Webpack会将打包文件输出到dist目录下。

加速webpack打包速度和减小打包体积的优化

以下是一些加速Webpack打包和减小打包体积的技巧：

1. 优化Webpack配置：使用Tree shaking来减小打包体积，设置Webpack的mode为production以启用UglifyJsPlugin等插件进行代码压缩和优化。

2. 使用Webpack的code splitting功能：将代码分割成较小的块，以便在需要时动态加载。

3. 压缩图片和字体文件：使用ImageMinWebpackPlugin和FontminWebpackPlugin等插件来压缩图片和字体文件，减小打包体积。

4. 缓存：启用Webpack的缓存功能，以便在修改代码时只重新打包修改的文件，而不是重新打包所有文件。

5. 使用DLLPlugin和DllReferencePlugin：将一些第三方库打包成单独的文件，以便在每次打包应用程序时不必重新打包这些库。

6. 使用HappyPack插件：使用多线程来加速Webpack打包，以便同时处理多个任务。

7. 使用externals选项：将一些不需要打包的库从打包中排除，以便减小打包体积。

8. 使用Webpack-bundle-analyzer插件：分析打包后的文件，以便找出冗余的代码和依赖关系，进行优化。

这些技巧可以帮助优化Webpack的打包速度和打包体积。

webpack配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 自动引入资源插件  npm install --save-dev html-webpack-plugin
const MiniCssExtracPlugin = require("mini-css-extrac-plugin"); // css抽离
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");  //css压缩 npm install css-minimizer-webpack-plugin  --save-dev 
const TerserPlugin = require("terser-webpack-plugin"); // js压缩  npm install --save-dev terser-webpack-plugin
//加载toml、yarm、json5数据资源 npm install toml yarm json5 -D
const toml = require("toml");
const yarm = require("yarm");
const json5 = require("json5");

module.exports = (env) => {
  return {
    // 手动分离公共文件，通过配置成对象的方式实现多入口代码分割
    // entry: {
    //  index:{
    //    import:"./src/index.js",
    //    dependOn: "shared"  // 抽离公共文件
    //  },
    //  shared: "lodash"      // 公共的js文件
    // },
    // 多入口
  	// entry: {
    // 	 pageOne: './src/pageOne/index.js',
    //  	pageTwo: './src/pageTwo/index.js',
    //  	pageThree: './src/pageThree/index.js',
  	// },
    // 单入口
    entry: {
      index: "./src/index.js",
    },
    output: {
      filename: "scripts/[name].[contenthash].js", // 将所有的js放入同一个文件夹，并且根据文件名自动命名
      path: path.resolve(__dirname, "./dist"),
      clean: true, // 清除上一次的垃圾文件
      assetModuleFilename: "images/[contenthash][ext]", // 在images目录下，根据文件内容自动生成hash文件名
      publicPath: "https://*****.com/", // 公共路径（cdn域名或者本地localhost）
    },
    mode: env.prodection ? "prodection" : "development", // 生产环境或者开发环境 package.json 启动命令：npx webpack --env prodection
    devtool: "cheap-module-source-map",     // 真实报错文件指向,生产环境一般不开启sourcemap
    // 插件（非必要的，缺少也不影响项目打包）
    plugins: [
      new HtmlWebpackPlugin({
        template: "./index.html", // 模板
        filename: "app.html",
        inject: "body", // script 存在的位置
        hash: true, // 解决缓存
        minify: {
          removeAttributeQuotes: true, // 压缩，去掉引号
        },
      }),
      new MiniCssExtracPlugin({
        filename: "style/[contenthash].css",
      }),
    ],
    devServer: {
      static: "./dist", // 监听根目录文件变化，自动刷新页面插件 npm install --save-dev webpack-dev-server
      //反向代理
      proxy: {
        "/ajax": {
          target: "https:**********",
          ws: true,
          changeOrigin: true,
        },
      },
    },
    // 模块（必要的，缺少影响项目打包）
    module: {
      rules: [
        //资源模块类型我们称之为Asset Modules Type，总共有四种，来代替loader，分别是：
        // asset/resource：发送一个单独的文件并导出URL，替代file-loader
        // asset/inline：导出一个资源的data URI(base64)，替代url-loader
        // asset/source：导出资源的源代码，之前通过使用raw-loader实现
        // asset：介于asset/resource和asset/inline之间， 之前通过url-loader+limit属性实现。
        {
          test: /\.(png|gif|jp?g|svg|webp|ico)$/, // 正则图片文件
          type: "asset",
          generator: {
            filename: "images/[contenthash][ext]", // 优先级高于 assetModuleFilename
          },
        },
        {
          // 支持less
          // npm install style-loader css-loader less-loader less --save-dev
          // 抽离 npm install mini-css-extrac-plugin  --save-dev   webpack5环境下构建的插件
          test: /\.(le|c)ss$/, // .less and .css
          use: [MiniCssExtracPlugin.loader,/* "style-loader", */ "css-loader","less-loader"],
        },
        {
          test: /\.(woff|woff2|eot|ttf|oft)$/, // 正则字体文件
          type: "asset/resource",
        },
        //加载csv、xml数据资源 npm install csv-loader xml-loader -D
        {
          test: /\.(csv|tsv)$/,
          use: "csv-loader",
        },
        {
          test: /\.xml$/,
          use: "xml-loader",
        },
        //加载toml、yarm、json5数据资源
        {
          test: /\.toml$/,
          type: "json",
          parser: {
            parse: toml.parse,
          },
        },
        {
          test: /\.yarm$/,
          type: "json",
          parser: {
            parse: yarm.parse,
          },
        },
        {
          test: /\.json5$/,
          type: "json",
          parser: {
            parse: json5.parse,
          },
        },
        // loader工具 支持数组方式链式调用，数组靠后的元素先执行
        {
          // 压缩图片
          //图片小于一定大小使用base64 否则使用file-loader产生真实图片 npm install url-loader --save-dev
          test: /\.(png|gif|jp?g|svg|webp|ico)$/, // 正则
          use: [
            {
              loader: "url-loader",
              options: {
                limit: 5000, //小于限定使用base64
                name: "home/images/[name].[hash:8].[ext]",
                publicPath: `../../`,
                esModule: false,
              },
            },
          ],
        },
        // 使用babel-loader npm install -D babel-loader @babel/core @babel/preset-env
        // regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容 async/await 的语法
        // npm install --save @babel/runtime
        // npm install --save-dev @babel/plugin-transform-runtime
        {
          test: /\.js$/,
          exclude: /node_modules/, // *业务代码里面可能会引入node_modules外部js，这些js不需要babel-loader编译，因此需要排除掉
          use: {
            loader: "babel-loader", // *引入babel-loader
            options: {
              presets: ["@babel/preset-env"], // *引入预设
              plugins: [
                [
                  "@babel/plugin-transform-runtime", // *配置插件信息
                ],
              ],
            },
          },
        },
      ],
    },
    optimization: {
      minimizer: [new CssMinimizerPlugin(),new TerserPlugin()],   //代码压缩 mode改为 production
      splitChunks: {
        // 缓存
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendors",
            chunks: "all", // 自动重复代码抽离
          },
        },
      },
    },
  };
};

webpack配置拆分

webpack.config.common.js文件公共环境配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 自动引入资源插件  npm install --save-dev html-webpack-plugin
const MiniCssExtracPlugin = require("mini-css-extrac-plugin"); // css抽离
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); //css压缩 npm install css-minimizer-webpack-plugin  --save-dev
const TerserPlugin = require("terser-webpack-plugin"); // js压缩  npm install --save-dev terser-webpack-plugin
//加载toml、yarm、json5数据资源 npm install toml yarm json5 -D
const toml = require("toml");
const yarm = require("yarm");
const json5 = require("json5");

module.exports = {
  entry: {
    index: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    clean: true, // 清除上一次的垃圾文件
    assetModuleFilename: "images/[contenthash][ext]", // 在images目录下，根据文件内容自动生成hash文件名
  },
  // 插件（非必要的，缺少也不影响项目打包）
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html", // 模板
      filename: "app.html",
      inject: "body", // script 存在的位置
      hash: true, // 解决缓存
      minify: {
        removeAttributeQuotes: true, // 压缩，去掉引号
      },
    }),
    new MiniCssExtracPlugin({
      filename: "style/[contenthash].css",
    }),
  ],
  // 模块（必要的，缺少影响项目打包）
  module: {…},
  optimization: {
    splitChunks: {
      // 缓存
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all", // 自动重复代码抽离
        },
      },
    },
  },
};

webpack.config.dev.js文件开发环境配置 npx webpack -c ./webpack.config.dev.js

module.exports = {
  output: {
    filename: "scripts/[name].js", // 将所有的js放入同一个文件夹，并且根据文件名自动命名
  },
  mode: "development", // 生产环境或者开发环境 package.json 启动命令：npx webpack --env prodection
  devtool: "cheap-module-source-map", // 真实报错文件指向,生产
  devServer: {
    static: "./dist", // 监听根目录文件变化，自动刷新页面插件 npm install --save-dev webpack-dev-server
    //反向代理
    proxy: {
      "/ajax": {
        target: "https:**********",
        ws: true,
        changeOrigin: true,
      },
    },
  },
};

webpack.config.prod.js文件生产环境配置 npx webpack -c ./webpack.config.prod.js

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");  //css压缩 npm install css-minimizer-webpack-plugin  --save-dev 
const TerserPlugin = require("terser-webpack-plugin"); // js压缩  npm install --save-dev terser-webpack-plugin

module.exports = {
  output: {
    filename: "scripts/[name].[contenthash].js", // 将所有的js放入同一个文件夹，并且根据文件名自动命名
    publicPath: "https://*****.com/", // 公共路径（cdn域名或者本地localhost）
  },
  mode: "prodection", // 生产环境或者开发环境 package.json 启动命令：npx webpack --env prodection
  optimization: {
    minimizer: [new CssMinimizerPlugin(), new TerserPlugin()], //代码压缩 mode改为 production
  },
  performance: {
    hints: false, // 关闭性能提示
  },
};

webpack.config.js 运行：webpack -c ./webpack.config.js --env development

const { merge } = require ('webpack-merge')   // npm install webpack-merge -D
const commonConfig = require ('./webpack.config.common')
const productionConfig = require ('./webpack.config.prod')
const developmentConfig = require ('./webpack.config.dev')

module.exports = (env) => {
  switch (true) {
    case env.development :
      return merge(commonConfig,developmentConfig)
    case env.production :
      return merge(commonConfig,productionConfig)
    defult:
      return new Error()
  }
}

封装webpack自定义插件

1. 创建一个 JavaScript 文件，并导出一个函数。这个函数将作为你的插件的构造函数。

2. 在函数中定义一个 apply 方法，该方法接收一个 compiler 参数。这个 compiler 对象是 Webpack 的核心，它包含了 Webpack 的所有配置和工作流程。

function MyPlugin() {} // 构造函数

// 核心 apply 方法
MyPlugin.prototype.apply = function(compiler) {
  // 插件逻辑实现
};

3. 在 apply 方法中，可以通过 compiler.hooks 对象访问 Webpack 的生命周期钩子。通过这些钩子，你可以在 Webpack 运行的不同阶段执行自定义代码。

compiler.hooks.done.tap('PluginName', (stats) => {
  console.log('编译完成!');
});

4. 实现你的插件逻辑，例如在特定的 Webpack 钩子上注册回调函数，向编译器添加自定义插件等。

5. 将你的插件打包成一个 npm 模块，并在项目中引入和使用它。

Webpack 插件本质上是一个具有 apply 方法的类或函数对象。通过挂接到 Webpack 编译器的生命周期钩子，我们可以实现各种构建时的定制化功能，如资源处理、日志输出、文件生成等。

const MyPlugin = function() {};

MyPlugin.prototype.apply = function(compiler) {
  compiler.hooks.done.tap('MyPlugin', (stats) => {
    console.log('Webpack 构建已完成!');
    if (stats.hasErrors()) {
      console.error('构建过程中出现错误');
    }
  });
};
module.exports = MyPlugin;

上面示例我们定义了一个 MyPlugin 插件，它在 Webpack 编译完成后输出一条信息。
在 apply 方法中，我们使用 compiler.hooks.done 钩子注册了一个回调函数，在编译完成后输出一条消息。


要使用这个插件，你需要将它打包成一个 npm 模块，并在 Webpack 配置文件中引入和使用它：

const MyPlugin = require('my-plugin');

module.exports = {
  // ...
  plugins: [
    new MyPlugin()
  ]
};

在这个示例中，我们在 Webpack 配置文件中引入了 MyPlugin 插件，并通过 plugins 选项将其添加到插件数组中。这样一来，当 Webpack 进行编译时，MyPlugin 就会被自动启用并执行相应的逻辑。

如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀