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 共享    },  ]};

可以看到配置的前后，打包的体积整体也更小了。