在前端开发中，我们经常使用 webpack 构建工具来编译打包我们的代码。使用 webpack 也会经常用到一些第三方插件和库，比如 React、Vue 等。这些插件和库都需要通过 npm 安装，但是每次打包时都需要重新编译，这不仅浪费时间，还会降低开发效率。
webpack-get-dlls 是一个 npm 包，可以通过预先编译这些第三方插件和库来加快 webpack 的构建速度，从而提高我们的开发效率。
webpack-get-dlls 的安装和配置
首先我们需要将 webpack-get-dlls 安装到我们的项目中：
npm i webpack-get-dlls --save-dev
安装完成后，我们需要在我们的项目中添加一个名为 webpack.dll.js 的配置文件，该配置文件用于配置我们要预先编译的第三方插件和库。以下是一个简单的 webpack.dll.js 配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
------- --------- ------------
--
------- -
----- ----------------------- -------
--------- ----------------
-------- --------
--
-------- -
--- -------------------
----- ---------
----- ----------------------- ---------------------------
--
-
--这个配置文件做了什么呢？
- entry：我们指定了要预先编译的第三方插件和库。
- output：我们指定了编译后的文件保存路径，文件名和库名。
- plugins：我们使用了 webpack 的 DllPlugin 插件来生成 manifest 文件，用来告诉 webpack 我们编译好的库信息。
完成了配置文件的编写，我们就可以使用 webpack 来编译我们的库了。
webpack --config webpack.dll.js
这样我们就可以得到一个名为 vendor.dll.js 的文件和一个名为 vendor.manifest.json 的 manifest 文件。这些文件会被保存在我们指定的目录中。
webpack-get-dlls 的使用方法
当我们拥有了预先编译好的第三方插件和库时，就可以在我们的项目中使用 webpack-get-dlls 来快速引入这些插件和库，从而提高 webpack 的构建速度。
首先我们需要在我们的项目中配置一个名为 webpack.config.js 的文件，该文件用于配置我们的项目的主要编译选项。以下是一个简单的 webpack.config.js 配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- - ---------------------- - - ----------------------------
-------------- - -
------ -
---- ----------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
------------------------
-------- ------------------------
-------------- -
----------------------- ---------------------------
-
--
-
--这个配置文件做了什么呢？
- entry：我们指定了项目的入口文件。
- output：我们指定了编译后的文件保存路径和文件名。
- plugins：我们使用了 webpack-get-dlls 提供的 getDllReferencesPlugin 插件来引入我们预先编译的第三方插件和库。
我们需要在 plugins 中调用 getDllReferencesPlugin 并传入对象，该对象包含两个字段：
- context：我们需要指定当前项目的路径。
- manifestFiles：我们需要传入一个数组，该数组中包含我们预先编译的 vendor.manifest.json 文件路径。
这样，我们就可以将预先编译的第三方插件和库引入我们的项目了。现在，我们只需要再次运行 webpack 命令来构建我们的项目即可。
webpack
当我们运行完这个命令后，就能看到我们的项目已经成功地从预先编译的第三方插件和库中引入了依赖，从而加速了我们项目的构建过程。
结语
通过使用 webpack-get-dlls，我们可以提高项目的开发效率，加快项目的构建速度，从而更加专注地开发出高质量的前端项目。希望这个教程对你有所帮助。
最后，附上一个完整的示例代码：
webpack.dll.js：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
------- --------- ------------
--
------- -
----- ----------------------- -------
--------- ----------------
-------- --------
--
-------- -
--- -------------------
----- ---------
----- ----------------------- ---------------------------
--
-
--webpack.config.js：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- - ---------------------- - - ----------------------------
-------------- - -
------ -
---- ----------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
------------------------
-------- ------------------------
-------------- -
----------------------- ---------------------------
-
--
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601581e8991b448de293