在使用 Dllplugin 之前，首先我们应该了解它是干什么的，如果你的项目够大的话，可能每次编译都要花费很多时间，那么Dllplugin就是用来处理这个事情的。通过使用它你可以大大缩短编译的时间，提升构建速度。接下来我们就来看看如何使用这个配置。
下面是官网给出的介绍：
这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。
context (optional): manifest 文件中请求的上下文(context)(默认值为 webpack 的上下文(context))name: 暴露出的 DLL 的函数名 (TemplatePaths: [hash] & [name] )path: manifest json 文件的绝对路径 (输出文件)
new webpack.DllPlugin(options)
在给定的 path 路径下创建一个名为 manifest.json 的文件。 这个文件包含了从 require 和 import 的request到模块 id 的映射。 DLLReferencePlugin 也会用到这个文件。
这个插件与 output.library 的选项相结合可以暴露出 (也叫做放入全局域) dll 函数。
这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。
context: (绝对路径) manifest (或者是内容属性)中请求的上下文manifest: 包含 content 和 name 的对象，或者在编译时(compilation)的一个用于加载的 JSON manifest 绝对路径content (optional): 请求到模块 id 的映射 (默认值为 manifest.content)name (optional): dll 暴露的地方的名称 (默认值为 manifest.name) (可参考 externals)scope (optional): dll 中内容的前缀sourceType (optional): dll 是如何暴露的 (libraryTarget)
new webpack.DllReferencePlugin(options)
通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上，之后再在需要的时候通过内置的 __webpack_require__ 函数来 require 他们
与
output.library 保持
name 的一致性。
从这里可以看出 Dllplugin和DllReferencePlugin是配合使用的，具体如下：
1.首先你需要创建一个webpack.dll.config.js文件，代码如下：
const
path =
require(
'path');
const
webpack =
require(
'webpack');
const
CleanWebpackPlugin =
require(
'clean-webpack-plugin');
module.
exports = {
entry: {
vendor: [
'lodash']
// 这里我是使用了lodash，你可以写入其他的依赖包
},
output: {
path:
path.
join(
__dirname,
'dll'),
// 生成的文件存放路径
filename:
'[name].dll.js',
// 生成的文件名字(默认为vendor.dll.js)
library:
'[name]_[chunkhash]'
// 生成文件的映射关系，与下面DllPlugin中配置对应
},
plugins: [
new
webpack.
DllPlugin({
// 会生成一个json文件，里面是关于dll.js的一些配置信息
path:
path.
join(
__dirname,
'dll',
'[name]-manifest.json'),
name:
'[name]_[chunkhash]',
// 与上面output中配置对应
context:
__dirname
// 上下文环境路径（必填，为了与DllReferencePlugin存在与同一上下文中）
}),
new
webpack.
optimize.
UglifyJsPlugin(),
new
CleanWebpackPlugin([
'dll'])
]
}
2.在你的生产环境配置文件中加入DllReferencePlugin插件：
const
merge =
require(
'webpack-merge');
const
UglifyJSPlugin =
require(
'uglifyjs-webpack-plugin');
const
common =
require(
'./webpack.common.js');
const
webpack =
require(
'webpack');
module.
exports =
merge(
common,{
devtool:
'source-map',
plugins: [
new
UglifyJSPlugin(),
new
webpack.
DefinePlugin({
'process.env.NODE_ENV'
:
JSON.
stringify(
'production')
}),
new
webpack.
HashedModuleIdsPlugin(),
new
webpack.
DllReferencePlugin({
context:
__dirname,
// 与DllPlugin中的那个context保持一致
manifest:
require(
'./dll/vendor-manifest.json')
// 下面这个地址对应webpack.dll.config.js中生成的那个json文件的路径
})
]
})
3.将生成的dll.js 文件引入index.html中：
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>DllPlugin
</
title
>
</
head
>
<
body
>
<
script
src=
"../dll/vendor.dll.js"
>
<
/
script
>
</
body
>
</
html
>
注意：src的路径的引入位置
4.package.json文件中加入dll：
"scripts": {
"build":
"webpack --config webpack.prod.js",
"dll":
"webpack --config webpack.dll.config.js"
}
5.接下来就是运行dll和build,首先yarn dll，然后yarn build，然后你就能够发现，编译的速度会相当的快奥！值得注意的是，就是每次添加新的依赖包，都需要重新yarn dll一下！
使用插件前：
使用插件后：
