Webpack对于公共资源的提炼之webpack.optimize.CommonsChunkPlugin

Webpack是一个强大的前端构建工具，它可以将多个模块打包成一个或多个bundle文件。随着项目规模不断扩大，我们有时会发现一些公共资源（如第三方库、框架等）被重复打包到了每个bundle中，导致代码冗余和加载时间延长。为了避免这种情况，Webpack提供了一个插件——CommonsChunkPlugin，用于将公共资源提取到单独的bundle中。

CommonsChunkPlugin插件的使用方法

在Webpack4及以上版本中，可以通过optimization.splitChunks配置项来实现公共资源的提取。但在此之前，我们需要使用CommonsChunkPlugin插件来进行操作。

安装CommonsChunkPlugin插件

要使用CommonsChunkPlugin插件，我们需要先安装webpack包和webpack.optimize.CommonsChunkPlugin插件包：

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

配置CommonsChunkPlugin插件

在Webpack配置文件中，我们需要引入CommonsChunkPlugin插件，并在plugins数组中添加一个新的实例，来告诉Webpack哪些模块是公共资源。

举个例子，假设我们有两个入口文件entry1.js和entry2.js，它们都引用了jquery库。我们希望将jquery提取成一个单独的bundle，那么我们可以这样配置：

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

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

在上面的配置中，我们使用了CommonsChunkPlugin插件，并传入了一个选项对象。其中，name选项指定了提取出来的公共资源的名称（例如：vendor.js）。而minChunks选项则是一个函数，用于指定哪些模块应该被提取到公共资源中。在本例中，我们通过判断模块的上下文路径是否包含node_modules来确定其是否是第三方依赖。

引用提取出来的公共资源

在配置完CommonsChunkPlugin之后，我们需要在HTML页面中引用提取出来的公共资源。以前面的例子为例，我们可以在HTML页面中添加如下代码：

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

这样，jquery库就被提取到了vendor.js中，而entry1.js和entry2.js则分别包含了各自的业务逻辑。

CommonsChunkPlugin插件的进阶使用

除了上述的基本用法之外，CommonsChunkPlugin插件还有一些进阶的用法。下面列举了其中比较常见的几种：

多个入口文件共享公共资源

在多个入口文件中，可能会有一些公共的业务逻辑或组件需要进行提取。我们可以通过将多个entry指向同一个模块来实现这一点。

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

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

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

webpack对于公共资源的提炼之webpack.optimize.CommonsChunkPlugin