webpack学习之路（六）hash/chunkHash/contentHash

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.