Webpack 4 在处理大型项目时十分强大，它可以使你快速地构建现代化的 Web 应用程序。然而，当项目的体积变得越来越大时，Webpack 可能会变得不太灵活和缓慢。如果你想使项目构建速度更快，你可以考虑将一些共享库打包成 Dll 文件。在本文中，我们将讨论如何将 jQuery 打包成 Dll 文件。
什么是 Dll 文件？
Dll 是动态链接库的缩写，它是一种包含代码和数据的文件，这些代码和数据可以由多个程序共享。通常情况下，我们将一些常用的库打包成 Dll 文件，可以在多个项目中重复使用，减少打包时间和文件大小。
如何将 jQuery 打包成 Dll 文件？
我们首先需要安装 webpack 和 webpack-cli：
npm install webpack webpack-cli --save-dev
然后安装 webpack.DllPlugin 和 AddAssetHtmlWebpackPlugin：
npm install webpack.DllPlugin add-asset-html-webpack-plugin --save-dev
现在我们开始配置 webpack。首先，我们在项目根目录下创建一个名为 webpack.config.dll.js 的文件，这个配置文件将负责打包 jQuery：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- - ------------------ - - --------------------------------
-------------- - -
----- -------------
------ -
------- -----------
--
------- -
----- ----------------------- -------
--------- ----------------
-------- ---------
--
-------- -
--- ---------------------
--- -------------------
----- ----------------------- ----------------------------
----- ---------
-------- --------------
---
--
--这里使用了 CleanWebpackPlugin 来清理上一次打包的文件，使用了 webpack.DllPlugin 来生成 manifest.json 文件，并在 output 中使用 [name].dll.js 作为输出文件名，此处 [name] 为对应的 entry 名称，因此对应 jquery 库将会输出到 dll/jquery.dll.js 文件中。
接下来我们需要在 package.json 中添加一条打包的命令：
{
"scripts": {
"build:dll": "webpack --config=webpack.config.dll.js"
}
}现在我们可以运行 npm run build:dll 来打包 jquery 库了。这个打包过程只需要进行一次，以后每次打包我们都可以直接使用之前打包好的 Dll 文件。
接下来，我们需要在 main webpack 配置文件中引入 Dll 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- - ------------------ - - --------------------------------
----- ------------------------- - -----------------------------------------
-------------- - -
----- -------------
------ -
---- -----------------
--
------- -
----- ----------------------- --------
--------- ---------------------
--
-------- -
--- ---------------------
--- ----------------------------
-------- --------------
--------- --------------------------------------
---
--- ---------------------------
--------- ----------------------- ---------------------
---
--
--这里使用了 webpack.DllReferencePlugin 来引用 Dll 文件，使用 AddAssetHtmlWebpackPlugin 来将 Dll 文件添加到页面中。
现在我们可以使用 jQuery 了，在入口文件中添加以下代码：
import $ from 'jquery';
$('body').text('Hello World!');最后，我们运行 npm run build 就可以打包我们的应用程序了。
总结
本文介绍了如何将 jQuery 打包成 Dll 文件，并在 main webpack 配置文件中引入 Dll 文件，可以提高项目的打包速度和减少打包体积。同时，我们在示例代码中还演示了如何使用 jQuery。
希望本文对于你学习 Webpack 和优化项目构建有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f9d37ef6b2d6eab3131f0c