Webpack系列-文件指纹策略

概述

webpack的指纹策略是通过给文件加上hash后缀，做到当代码有修改时打包出来的文件后缀也会修改，从而可以把静态资源开启持久缓存，这样每次有更新的代码打包后生成的都是新的问题件，从而最大程度上使用缓存。

文件指纹类型

webpack提供了三种hash类似

hash

和整个项目构建相关，只要一个文件有修改，整个项目的hash值就会改变。
例如

// webpack.prod.js
entry: {
    index: "./src/index",    
    search: "./src/search"
},
output: {
    path: path.join(__dirname, "dist"),
    filename: "[name]_[hash:8].js",
    publicPath: "./dist"
}

它的问题是当项目有多入口或者使用code spliting，只要有一个文件修改打包的生成的js代码hash都会改变。不利于缓存。

chunkhash

模块的hash，根据模块的修改才改变对应的hash值。

根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响

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

contenthash

根据文件内容来定义 hash ，文件内容不变，则 contenthash 不变。

某个页面既有js资源，又有css资源。如果css资源也使用Chunkhash。如果修改了js。由于css资源使用了Chunkhash，就会导致css内容没有变化，发布上线的文件却发生了变化。因此，通常对css资源使用Contenthash。这个时候可以使用mini-css-extract-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建

module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name][chunkhash:8].js',
        path: __dirname + '/dist'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: `[name][contenthash:8].css`
        }),
    ]
};

图片，字体文件的文件指纹设置

设置 file-loader（或url-loader） 的 name，使用 [hash]
图片，字体文件的hash和css/js资源的hash概念不一样，图片，字体文件的hash是由内容决定的

{
    test: /\.(png|svg|jpg|gif)$/,
    use: [{
        loader: 'file-loader',
        options: {
            name: 'img/[name][hash:8].[ext] '
        }
    }]
}