roadhog打包生成hash值文件的配置的过程（解决浏览器代码缓存）
初步解决
下面用到的插件：
HTML Webpack Plugin（本来打算通过这个插件打包出带哈希值的文件，但结果不行，但它另有用途）
Webpack Manifest Plugin（没有这个的话，服务器根本就不知道hash之后的JS和CSS。）
安装Webpack Manifest Plugin后在.webpackrc.js中添加：
export default {
...省略
"manifest": {},
"hash": true,
};
但是上面有一个问题，index.html中引用的js和css也是会被编译成hash值文件。所以，这样子打包后的index.html中的引用是会出问题的。
这个时候，安装HTML Webpack Plugin，把public中的index.html，更改为index.ejs（里面引用的js和css可以删掉了）。再在.webpackrc.js中添加：
export default {
...省略
"html": {
"template": "./public/index.ejs",
},
};
这样子打包后，生成的index.html会自动添加上编译为hash值文件名后的路径。
上面打包时遇到的一个报错：
Browserslist: caniuse-lite is outdated. Please run next command ’npm update’（按照这个报错执行npm updata后，没有变化，还是报错的）
需要到该项目的node_modules下，把caniuse-lite和browserslist这两个文件夹给删除。然后输入npm i caniuse-lite browserslist才可以解决。
这样子就初步解决了浏览器代码缓存的问题（部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本）。
提取公用代码
但是还不够好，更好的做法是，将第三方库（例如 react）单独提取出来（它们很少像本地的源代码那样频繁修改），利用浏览器的缓存机制，减少向服务器获取资源。
roadhog已经内置了 webpack 的 CommonsChunkPlugin 插件。
直接在.webpackrc.js中添加：
export default {
...省略
"commons": [
{
async: '__common',
children: true, // 如果设置为 `true`，所有公共 chunk 的子模块都会被选择
minChunks: 4, // 模块必须被4个 入口chunk 共享
},
]
};
可以看到配置的前后，打包的体积整体也更小了。
发表评论 (审核通过后显示评论)：