Webpack 插件 CommonsChunkPlugin

简介

CommonsChunkPlugin 是 Webpack 中一个非常重要的插件，它用于提取公共模块到单独的文件中，以便在多个入口文件之间共享这些公共模块。通过将公共模块提取到一个单独的文件中，可以有效地减少打包后文件的体积，提高页面加载速度。

安装

要使用 CommonsChunkPlugin 插件，首先需要安装 webpack。可以通过 npm 进行安装：

--- ------- ------- ----------

使用方法

在 webpack 的配置文件中引入 CommonsChunkPlugin 插件，并配置参数，示例如下：

----- ------- - -------------------

-------------- - -
  ------ -
    ---- ---------------
    ------- --------- ------------
  --
  ------- -
    --------- -------------------
    ----- ----------------------- -------
  --
  -------- -
    --- -------------------------------------
      ----- ---------
      ---------- --------
    --
  -
--

在上面的示例中，我们定义了两个入口文件 app.js 和 vendor.js，其中 vendor.js 中引入了 react 和 react-dom 两个库。通过配置 CommonsChunkPlugin 插件，将 react 和 react-dom 提取到 vendor.js 文件中。

参数说明

• name：指定提取的公共模块的名称，可以是一个已有的入口名称，也可以是一个新的名称。
• minChunks：指定被提取的模块至少要被引用多少次才会被提取，默认值为 1。

总结

CommonsChunkPlugin 插件是 Webpack 中一个非常实用的插件，通过它可以将公共模块提取到单独的文件中，减少打包后文件的体积，提高页面加载速度。在实际项目中，建议合理使用 CommonsChunkPlugin 插件，以优化项目的打包效果。