背景
在前端开发中，我们经常会使用一些第三方库来辅助我们完成项目的构建和实现，例如 jQuery、Bootstrap、React 等。这些库通常都是相对稳定的，不需要频繁修改，因此我们可以将它们单独打包成一个 Vendor 文件，并缓存起来，以提高页面加载速度。
Webpack 是一个流行的前端构建工具，它可以帮助我们完成代码的打包和优化。在使用 Webpack 进行项目构建时，我们可以通过一些配置来实现 Vendor 文件的分离。
方法
第一步：安装插件
在使用 Webpack 进行项目构建时，我们可以使用 CommonsChunkPlugin 插件来将 Vendor 文件分离出来。首先，我们需要通过 npm 安装该插件：
npm install --save-dev webpack
第二步：配置 Webpack
接下来，我们需要在 Webpack 的配置文件中添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
----- -----------------
------- ---------- ------------
--
------- -
--------- ------------
----- --------- - -------
--
-------- -
--- -------------------------------------
----- --------
--
-
--在上面的代码中，我们首先指定了入口文件 index.js，同时将需要分离的第三方库（这里是 jQuery 和 Bootstrap）设置为一个单独的 entry。然后，我们将 Vendor 文件的名称指定为 vendor.js，并将其输出到 dist 目录中。
最后，我们在插件中使用 CommonsChunkPlugin 来将 Vendor 文件单独打包。
第三步：运行 Webpack
完成上述配置后，我们可以通过运行以下命令来启动 Webpack：
webpack
Webpack 将会根据我们的配置文件进行构建，并将 Vendor 文件单独打包。
意义
将 Vendor 文件单独打包的主要意义在于提高页面加载速度。由于第三方库通常都是相对稳定的，我们可以将其单独打包并缓存起来，以减少每次页面加载时需要下载的资源数量。
另外，将 Vendor 文件单独打包还可以提高代码的可维护性。由于第三方库通常不需要频繁修改，我们可以将其与业务代码分离，以便于代码的维护和升级。
示例代码
以下是一个简单的示例代码，演示了如何将 jQuery 和 Bootstrap 单独打包成一个 Vendor 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------ ------------
-------
------
---- ------------------
---------- -----------
------
------- -------------------------
------- -----------------------
-------
-------import $ from 'jquery';
import 'bootstrap';
$(function() {
console.log('Hello, world!');
});-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
----- -----------------
------- ---------- ------------
--
------- -
--------- ------------
----- --------- - -------
--
-------- -
--- -------------------------------------
----- --------
--
-
--在上面的示例代码中，我们首先在 HTML 文件中引入了 Vendor 文件和业务代码文件。然后，在业务代码文件中引入了 jQuery 和 Bootstrap。
最后，我们在 Webpack 的配置文件中将 jQuery 和 Bootstrap 设置为一个单独的 entry，并使用 CommonsChunkPlugin 插件将其打包成一个 Vendor 文件。在运行 Webpack 后，我们可以在 dist 目录中看到生成的 vendor.js 和 main.js 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d38661a941bf71346b6870
