Use add-asset-html-webpack-plugin to resolve the problem that webpack4 DLL files generate hash inconsistencies in different environments

Problem Description:

The same code may not always generate the same hash value when using DLL cache, so it simply generates the hash value every time it is packaged. It wastes a few more seconds, but it solves the problem similar to Jenkins deployment where different machine environments may generate inconsistent hash values.

Let’s start with the project’s directory structure:

Vendors put files that don’t need webPack compilation, like zipped versions of third-party libraries you might use, or files you might ignore on Externals

Add -asset-html-webpack-plugin (add-asset-html-webpack-plugin

To generate the DLL file 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, / / algorithm test: new RegExp (' \ \. (js) | CSS $' / / compression js and CSS), the threshold: MinRatio: 0.8 // Only resources with a compression ratio lower than this value are processed})]};Copy the code

The DLL folder we generated is level with the SRC folder and the DLL folder is ignored in.gitignore

webpack.main.config.js:

/ * * omitted * / plugins: [new webpack. DllReferencePlugin ({context: __dirname, manifest: path.join(__dirname, 'dll', 'react.manifest.json') }), new AddAssetHtmlPlugin([ { filepath: Path.join (__dirname, 'DLL /*.dll.*.js'), // Find the path to the DLL file to import outputPath: 'DLL ', // outputs to the DLL folder in the build directory, and is then output to build by default, making it messy; the vendors should also be publicPath: ${process. The env. ` REACT_APP_PUBLICPATH | | '/'} DLL `, / / publicPath is used to modify the reference path, the default is quoted under the build file, but we are under the output to a DLL, So set this value; vendors do the same with vendors}, {filepath: path.join(__dirname, 'vendors/*.js'), outputPath: 'vendors', publicPath: ${process. The env. ` REACT_APP_PUBLICPATH | | '/'} vendors `,}])] / * * * / has been eliminatedCopy the code

First runnpm run dllThe results look like this (ignoring the ICONS folder):

Run againnpm run buildThe results are shown below:

As shown in the figure, both DLLS and vendors are copied into the Build folder,Json files in the DLL folder do not need to be copied. DllReferencePlugin only uses it to identify which libraries do not need to be processed. After compilation, the DLL variable names will be found in the main.xx.js fileAdd-asset-html-webpack-plugin (add-asset-html-webpack-plugin, add-asset-html-webpack-plugin, add-asset-html-webpack-plugin) Static generated for main webpack is automatically inserted by html-webpack-plugin. So we don’t need to worry about the static folder.

My project is create-React-app plus @craco. It may be different for everyone, but it just provides a way of thinkingThis will waste a few seconds running through the DLL, even if the generated DLL file hash is inconsistent, each environment using their own generated, there will be no problem.