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

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