webpack学习之路（六）hash/chunkHash/contentHashwebpack的指纹策略是实现前端增量更

webpack的指纹策略是实现前端增量更新的方案之一。通过给文件加上hash后缀，从而最大程度上使用缓存

webpack提供三种hash生成方式：

hash：和整个项目构建相关，只要一个文件有修改，整个项目的hash值就会改变
chunkHash：模块的hash，根据模块的修改才改变对应的hash值
contentHash：文章内容修改才会改变的hash值

根据描述，我们已经可以大概区分用法，chunkHash可以用于js打包，contentHash可以用到css文件打包。我们实践一下。

1.Hash

.
├── dist
├── package-lock.json
├── package.json
├── src
│   ├── page0.js
│   └── page1.js
└── webpack.config.js

webpack.config.js

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[hash:8].js'
},

输出

可以看到打包出来之后是两个文件的hash值一样，然后我编辑一下page0.js，再输出一次

可以发现，两个文件的hash值都改变。这在实际开发中肯定是不满足我们的需求的，那么chunkHash这个时候就可上场了。

2.chunkHash

webpack.config.js

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js'
},

打包之后可以发现，两个文件的hash值是不同的，现在我们再来修改一下page0.js

只有page0.jshash发生了变化，page1并没有变化，那么意味着page1.js可以使用缓存。

但是在这又延伸出来一个问题，如果我的文件内有css内容呢？可不可以剥离？当js修改的时候，不影响css版本呢？当然是可以的，这就使用到contentHash

3.contentHash

我们在page0.js引入一个.scss文件

import './style.scss'

我们要做的的是剥离css文件，并添加contentHash，这里需要借助一个插件mini-css-extract-plugin,安装之后引入一下：

  module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css'
    }),
  ],
};

打包看下

css文件已经被剥离出来了，这时候我们修改下page1.js，再编译一次

对比可以看出来，只有page0.js文件的hash值修改了，并没有影响css文件。

over。

链接文章

webpack学习之路（五）loader初识及常用loader介绍

webpack学习之路（四）webpack-hot-middleware实现热更新

webpack学习之路（三）webpack-dev-middleware

webpack学习之路（二）webpack-dev-server实现热更新

webpack学习之路（一）基础配置

I am moving forward.