Dll动态连接库
DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。
增加webpack.dll.js文件
/**
* 使用dll技术对某些库（第三方库，jquery、vant、react、vue）进行单独打包
* 当运行webpack时候，默认查找的是webpack.config.js文件
* 需求：需要运行webpack.dll.js
* 指令需要改成 webpack --config webpack.dll.js
* webpack.config.js中也需要更改配置，才能引入dll中的文件
*/
const {resolve} = require('path');
const webpack = require('webpack');
module.exports = {
//entry和output专门用来打包jquery的
entry:{
//最终打包生成的name是jquery
//数组，所有的jquery相关的库可以打包到一起
jquery:['jquery']
},
output:{
filename:'[name].js',
path:resolve(__dirname,'dll'),
library:'[name]_[hash:10]'//打包的库向外暴露的内容叫什么名字
},
plugins:[
//建立映射关系dll/manifest.json，告诉webpack将来打包不打包dll中已经打包的包
new webpack.DllPlugin({
name:'[name]_[hash:10]',//映射库暴露内容的名称
path:resolve(__dirname,'dll/manifest.json')//输出文件路径
})
],
mode:'production'
}
新增加的插件npm i add-asset-html-webpack-plugin -D
webpack.config.js中的更改
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
plugins中
//告诉webpack哪些库不参与打包，同时引入dll对应的名称
new webpack.DllReferencePlugin({
manifest:resolve(__dirname,'dll/manifest.json')
}),
//将某个包打包输出去，并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath:resolve(__dirname,'dll/jquery.js')
})
只要第三方包不变，dll相关文件就不需要更新，dll命令执行一次就好
