问题描述:
同一份代码,利用dll使用缓存时发现每次生成的hash值不一定总是相同,所以干脆每次打包都生成一遍,多浪费了几秒,但是解决了类似jenkins部署时不同机器环境可能生成不一致的问题。
先来一张项目的目录结构:

vendors里面放的是不需要webpack编译的文件,类似自己需要用的第三方库的压缩版文件或者在externals里面忽略的文件
重点:index.html里面不要手动写死需要引入的文件,我们待会使用add-asset-html-webpack-plugin动态引入
用来生成dll文件 webpack.dll.config.js:
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
mode:'production',
entry:{
'react':['react', 'react-dom', 'react-router-dom', 'mobx', 'mobx-react']
},
output:{
filename:'[name].dll.[hash:8].js',
path:path.resolve(__dirname,'dll'),
library:'[name]_dll_[hash:8]'
},
plugins:[
new CleanWebpackPlugin(),
new webpack.DllPlugin({
name:'[name]_dll_[hash:8]',
path:path.join(__dirname,'dll','[name].manifest.json')
}),
new CompressionPlugin({
algorithm: 'gzip',
test: new RegExp(
'\\.(js|css)$'
),
threshold: 10240,
minRatio: 0.8
})
]
};
我们生成的dll文件夹和src文件夹平级就行,.gitignore中忽略dll文件夹
webpack.main.config.js:
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: path.join(__dirname, 'dll', 'react.manifest.json')
}),
new AddAssetHtmlPlugin([
{
filepath: path.join(__dirname, 'dll/*.dll.*.js'),
outputPath: 'dll',
publicPath: `${process.env.REACT_APP_PUBLICPATH || '/'}dll`,
},
{
filepath: path.join(__dirname, 'vendors/*.js'),
outputPath: 'vendors',
publicPath: `${process.env.REACT_APP_PUBLICPATH || '/'}vendors`,
}
])
]
先运行 npm run dll
结果如下图(忽略icons文件夹):

再运行 npm run build
结果如下图:

如图中所示,dll和vendors都分文件夹copy到了build文件夹下,(dll文件夹下的json文件不需要copy过去,DllReferencePlugin只是用它来识别哪些库不需要处理,编译完成后main.xx.js文件中就会有dll的变量名
)这些文件不需要 main webpack流程处理,是我们使用add-asset-html-webpack-plugin动态copy的,然后在index.html里面就完成动态插入了;static下的为main webpack生成的由html-webpack-plugin完成自动插入。所以我们不需要管static文件夹。
我的项目是create-react-app加@craco,每个人的可能都不一样,只是提供一种思路 这样每次运行一遍,浪费几秒,就算生成的dll文件hash不一致,每个环境都用自己生成的,也不会有问题。