初步解決

下面用到的插件：

• HTML Webpack Plugin（簡化HTML文件的創(chuàng)建）
• Webpack Manifest Plugin（沒有這個(gè)的話，服務(wù)器根本就不知道hash之后的JS和CSS。）

安裝Webpack Manifest Plugin后在.webpackrc.js中添加：

export default {
  ...省略
  "manifest": {},
  "hash": true,
};

但是上面有一個(gè)問題，index.html中引用的js和css也是會(huì)被編譯成hash值文件。所以，這樣子打包后的index.html中的引用是會(huì)出問題的。

這個(gè)時(shí)候，安裝HTML Webpack Plugin，把public中的index.html，更改為index.ejs（里面引用的js和css可以刪掉了）。再在.webpackrc.js中添加：

export default {
  ...省略
  "html": {
    "template": "./public/index.ejs",
  },
};

這樣子打包后，生成的index.html會(huì)自動(dòng)添加上編譯為hash值文件名后的路徑。

上面打包時(shí)遇到的一個(gè)報(bào)錯(cuò)：
Browserslist: caniuse-lite is outdated. Please run next command ’npm update’（按照這個(gè)報(bào)錯(cuò)執(zhí)行npm updata后，沒有變化，還是報(bào)錯(cuò)的）
需要到該項(xiàng)目的node_modules下，把caniuse-lite和browserslist這兩個(gè)文件夾給刪除。然后輸入npm i caniuse-lite browserslist才可以解決。

這樣子就初步解決了瀏覽器代碼緩存的問題（部署新版本時(shí)不更改資源的文件名，瀏覽器可能會(huì)認(rèn)為它沒有被更新，就會(huì)使用它的緩存版本）。

提取公用代碼

但是還不夠好，更好的做法是，將第三方庫（例如 react）單獨(dú)提取出來（它們很少像本地的源代碼那樣頻繁修改），利用瀏覽器的緩存機(jī)制，減少向服務(wù)器獲取資源。

roadhog已經(jīng)內(nèi)置了 webpack 的 CommonsChunkPlugin 插件。
直接在.webpackrc.js中添加：

export default {
  ...省略
  "commons": [
    {
      async: '__common',
      children: true,  // 如果設(shè)置為 `true`，所有公共 chunk 的子模塊都會(huì)被選擇
      minChunks: 4,  // 模塊必須被4個(gè) 入口chunk 共享
    },
  ]
};

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