1、使用背景:
- 前端框架如vue react,它们体积大,构建慢
- 版本较稳定,不常升级版本
- 所以同一个版本只构建一次即可,不用每次都重新构建
webpack已经内置DllPlugin支持,不用下载插件
- 通过DllPlugin打包出的dll文件
- 通过DllRefrencePlugin使用dll文件
DllPlugin不适用于生产环境。
2、在build文件夹中新建一个webpack.dll.js文件
const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin')
const { srcPath, distPath } = require('./paths')
module.exports = {
mode: 'development',
// JS 执行入口文件
entry: {
// 把 React 相关模块的放到一个单独的动态链接库
react: ['react', 'react-dom']
},
output: {
// 输出的动态链接库的文件名称,[name] 代表当前动态链接库的名称,
// 也就是 entry 中配置的 react 和 polyfill
filename: '[name].dll.js',
// 输出的文件都放到 dist 目录下
path: distPath,
// 存放动态链接库的全局变量名称,例如对应 react 来说就是 _dll_react
// 之所以在前面加上 _dll_ 是为了防止全局变量冲突
library: '_dll_[name]',
},
plugins: [
// 接入 DllPlugin
new DllPlugin({
// 动态链接库的全局变量名称,需要和 output.library 中保持一致
// 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
// 例如 react.manifest.json 中就有 "name": "_dll_react"
name: '_dll_[name]',
// 描述动态链接库的 manifest.json 文件输出时的文件名称
path: path.join(distPath, '[name].manifest.json'),
}),
],
}
1、mode: ‘development’,
为了提高构建速度,一般针对开发环境要打包dll,生产环境不用这个
2、入口
3、在package.json
在 "scripts"中添加
“dll”: “webpack --config build/webpack.dll.js”
然后运行npm run dll
4、使用
html引入
webpack.dev.js中插件
new DllReferencePlugin({
// 描述 react 动态链接库的文件内容
manifest: require(path.join(distPath, 'react.manifest.json')),
}),