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码 是不会变的。如下是打包后结果

这样就解决了代码改变，确保不会使用缓存中老文件的问题了。