Webpack 插件使用详解：CommonsChunkPlugin 实现公共模块抽离
在前端项目开发中，Web 端前端构建工具已经成为了必不可少的一部分。而其中一个重要的工具就是 Webpack ，它是一个静态模块打包工具，它能够将多个 JavaScript 模块进行打包，最终形成一个可执行的 bundle.js 文件。在构建较大规模的项目时，我们常常需要把公共的 code 抽离出来，避免重复编译，优化项目的性能，而 CommonsChunkPlugin 插件就是我们实现这个功能的重要工具。
本文将为大家详细介绍 CommonsChunkPlugin 插件的使用方法以及相关实例代码。
一、什么是 CommonsChunkPlugin 插件？
CommonsChunkPlugin 是 Webpack 提供的插件之一，它的主要作用是将应用程序的公共资源（如重复引用的库等）提取到一个独立的文件中，从而实现代码的共享和复用。该插件可以帮助我们减少代码打包体积，提高应用程序的性能，尤其是在多页面应用或是多页面入口的单页面应用开发中，能够将一些公共的代码封装成单独的 chunk。
二、CommonsChunkPlugin 的使用方法
在 Webpack 4.x 版本之前，CommonsChunkPlugin 是 Webpack 内置的插件，可以直接使用，但是在 Webpack 4.x 版本之后，CommonsChunkPlugin 被移除，取而代之的是 optimization.splitChunks 配置属性，该属性用于控制 Webpack 如何拆分代码块。
以下是 CommonsChunkPlugin 的使用方法：
1、安装插件
在使用 CommonsChunkPlugin 插件之前，我们需要先在项目中安装插件。在命令行中运行以下命令：
npm install --save-dev webpack npm install --save-dev webpack-cli npm install --save-dev webpack-dev-server npm install --save-dev extract-text-webpack-plugin
其中， extract-text-webpack-plugin 插件是用来抽取 css 文件的插件，可以使用其他的 css 抽取插件替换。
2、添加 webpack 配置
在 webpack 配置文件中进行以下配置：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- ------------------------ - ---------------------------------------
-------------- - -
------ -
---- -------------------
------- --------- ------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- --------------------------------------
--- -------------------------------------
----- ---------
---------- ---------
--------- ------------------
--
-
-以上配置的作用分别是：
- entry：定义入口文件；
- output：定义打包后的文件存储路径和文件名；
- ExtractTextWebpackPlugin：抽取 css 文件的插件；
- CommonsChunkPlugin：提取公共模块的插件，其中 name 属性是 chunk 的名称，minChunks 属性设置最小抽取次数，filename 属性设置输出文件的文件名和路径。
3、运行 Webpack
在命令行中运行以下命令打包代码：
webpack --config webpack.config.js
最终将生成两个 bundle 文件：app.bundle.js 和 vendor.bundle.js，其中 vendor.bundle.js 就是公共部分的代码。
三、示例代码
以下是一个具有多个入口的 Webpack 4.x 版本的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ------------------------ - ---------------------------------------
-------------- - -
------ -
---- ---------------
------ -----------------
------- ----------
--
------- -
--------- --------------------- -- ------ ---- -----------------
----- ----------------------- -------
--
-------- -
--- ------------------------------------- -- ------
----- --------- -- ----- --
---------- - -- ------
---
--- -------------------------- -- -- --- --
--------- --------------------- -- ------ ---- -
--
--
------- -
------ -
-
----- ---------
---- ----------------------------------
--------- ---------------
---- ------------
--
-
-
-
--总结
Web 端前端构建工具在现代 Web 开发中扮演着极其重要的角色，而 Webpack 作为这些构建工具中最为流行的一款，它的插件 CommonsChunkPlugin 在优化前端项目中的性能、提高打包效率方面具有不可忽视的作用。本文为大家介绍了 CommonsChunkPlugin 插件的使用方法和示例代码，希望能够帮助各位成为一名更加优秀的前端工程师。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651cd08995b1f8cacd450587