Webpack 是一个强大的前端打包工具。使用 Webpack 可以轻松地将多个 JavaScript 文件打包成一个文件，从而提高应用程序的性能。在 Webpack 中，可以使用代码分割将应用程序拆分成多个块。这些块可以是应用程序的不同部分，也可以是应用程序的不同页面。但是，在应用程序中，经常会使用到一些公共的代码。这些代码可以是库、框架或者是自己编写的一些工具函数。在 Webpack 中，可以使用插件来实现公共代码的提取。
什么是公共代码？
公共代码是指在应用程序的不同部分或者不同页面中都会使用到的代码。例如，如果一个应用程序使用了 jQuery 库，那么这个库就是公共代码。在传统的开发中，公共代码需要在每个页面中都引入一遍。这样会导致代码重复，增加了页面的加载时间和带宽消耗。
Webpack 提供了一个插件叫做 CommonsChunkPlugin，用于提取公共代码。使用这个插件可以将公共代码提取出来，生成一个单独的文件。这个文件可以在多个页面中共享，从而减少了代码的重复，提高了页面的加载速度。
下面是一个简单的 Webpack 配置文件，用于提取公共代码：
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
---- -----------------
------- ---------- ---------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- -------------------------------------
----- --------
--
-
--在上面的配置中，entry 属性指定了应用程序的入口文件。其中，app 是应用程序的主入口文件，vendor 是公共代码的入口文件。在 output 属性中，filename 指定了打包后的文件名，path 指定了输出目录。
在 plugins 属性中，使用了 CommonsChunkPlugin 插件。这个插件的 name 属性指定了公共代码的名称。在这个例子中，公共代码被提取到了一个名为 vendor 的文件中。
示例代码
下面是一个简单的示例代码，用于演示如何使用 Webpack 提取公共代码。
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
---- ---------------
------- -------------------------------------
------- ----------------------------------
-------
--------- ------------ ------ - ---- --------- ------ - ---- --------- ---------------------------- ----------- - ---- ---------------------------- - ---------------------------- ---------------- ---
在上面的代码中，首先引入了 jQuery 和 Lodash 库。然后在 index.js 文件中使用了这两个库。在 Webpack 配置文件中，使用了 CommonsChunkPlugin 插件将公共代码提取到了 vendor.bundle.js 文件中。最终生成的文件如下：
----- ------------- ----------------
在 HTML 文件中，首先引入了 vendor.bundle.js 文件，然后再引入了 app.bundle.js 文件。这样就可以实现公共代码的提取了。
总结
使用 Webpack 可以轻松地实现公共代码的提取，从而减少代码的重复，提高页面的加载速度。在实际开发中，可以根据应用程序的不同部分和不同页面来提取公共代码。在 Webpack 中，使用 CommonsChunkPlugin 插件可以轻松地实现公共代码的提取。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65fbf4c4d10417a222781859