webpack 與 瀏覽器緩存

我們先在項目中加入 jquery 與 lodash 庫。

然後在index.js 中引入並使用，如下。

import _ from 'lodash'
import  $ from 'jquery'

const dom = $('<div>')
dom.html(_.join(['hello', 'world'], ' '))

$('body').append(dom)

然後打包。這裏我們先把sourcemap 文件去掉，即註釋掉webpack 配置項中的 devtool，如下：

devtool: "cheap-module-source-map",

然後，打包生成的文件就如下。（vendors 中保存的是node_module中的代碼，參考前面splitChunks 文章，splitChunks 默認配置項cacheGroups ）

當我們運行頁面時，第一次訪問這些文件是從後端請求的，但普通頁面刷新的話，第二次訪問這些文件，就是從瀏覽器的緩存中獲取了，因爲他們的HTTP請求是GET，GET 會默認存入緩存。

但是當我們對這些代碼稍有修改的話，但是它的文件名不變，那麼如果命中緩存的話，那麼加載的還是老的代碼，這是不符合我們的需求滴。

我們在這裏可以引入：content hash 。（當然在開發模式下，我們有了模塊熱更新，是不需要的，但是上線的代碼中是很有必要的）。我們配置content hash 也很簡單，如下。其中contenthash 與name 一樣都是佔位符。

  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].chunk.[contenthash].js',
    path: path.resolve(__dirname, 'bundle')
  },

contenthash 是根據文件數據生成的hash，當這個文件的代碼不變時，hash碼 是不會變的。如下是打包後結果

這樣就解決了代碼改變，確保不會使用緩存中老文件的問題了。