webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程

Webpack实践：DLLPlugin与DLLReferencePlugin的使用指南

在Webpack的优化过程中，DLLPlugin和DLLReferencePlugin扮演着非常重要的角色。它们能够实现bundles的拆分，从而极大地提升构建速度。本文将通过实例代码详细介绍这两个插件的使用教程，具有一定的参考价值。

一、在build文件夹下添加webpack.dll.config.js文件

我们需要创建一个新的webpack配置文件webpack.dll.config.js。在此文件中，我们将定义哪些模块需要被打包进DLL。例如：

```javascript

var path = require("path");

var webpack = require("webpack");

module.exports = {

// 要打包的模块的数组

entry: {

vendor: ['vue/dist/vue.esm.js', 'vue-router']

},

output: {

path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置

filename: '[name].dll.js', // 输出的DLL文件名，这里为vendor.dll.js

library: '[name]_library' // DLL中的全局变量名，需要与DllPlugin中的name保持一致。

},

plugins: [

new webpack.DllPlugin({

path: path.join(__dirname, '.', '[name]-manifest.json'), // 生成的manifest文件路径

name: '[name]_library', // 在运行时使用的全局变量名，与library保持一致

context: __dirname // 指定上下文目录，用于模块请求时定位模块路径

})

]

};

```

二、在package.json中添加脚本命令

在package.json文件的scripts字段中添加一个命令来运行这个新的webpack配置：`"dll": "webpack --config build/webpack.dll.config.js"`。这样你就可以通过运行`npm run dll`来生成DLL和对应的manifest文件。

三、生成vendor-manifest.json文件并引入DLL

运行`npm run dll`后，在static/js下会生成一个vendor-manifest.json文件，它包含了所有DLL的映射信息。然后，在项目的webpack配置文件中（如webpack.base.conf.js），添加DllReferencePlugin插件来引用这个DLL。在HTML文件中引入生成的DLL文件（如vendor.dll.js）。示例代码如下：

```javascript

// 在webpack配置文件中添加DllReferencePlugin插件的配置项

plugins: [

new webpack.DllReferencePlugin({

context: __dirname, // 指定上下文目录，用于模块请求时定位模块路径

manifest: require('./vendor-manifest.json') // 引入manifest文件，它包含了所有DLL的映射信息。

})

]

```

在HTML文件中引入DLL：``。这样配置之后，你可以看到项目构建速度大幅度提升，同时打包体积也减小了。这是因为DLLPlugin和DLLReferencePlugin帮助我们预先打包了那些不变的依赖库，避免了每次构建时都重新打包这些库。这大大减少了项目的构建时间和打包体积。如果你在使用过程中有任何疑问，欢迎留言给我，我会及时回复大家的问题。希望这篇文章对大家有所帮助！