使用add-asset-html-webpack-plugin解决webpack4 dll文件在不同环境生成hash不一致的问题

问题描述：

同一份代码，利用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)$'        //压缩 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'), // 找到要引入的dll文件的路径
                    outputPath: 'dll',   // 输出到build目录下的dll文件夹下,不设置的话默认输出到build下，比较乱;下面vendors同理
                    publicPath: `${process.env.REACT_APP_PUBLICPATH || '/'}dll`,   // publicPath是用来修改引用路径的，默认是引用build下的文件，但是我们输出到dll下了，所以需要设置这个值;下面vendors同理
                },
                {
                    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不一致，每个环境都用自己生成的，也不会有问题。