文件指纹

什么是文件指纹？

打包后输出的文件名的后缀

通常用于版本的管理

文件指纹如何生成

• Hash：和整个项目的构建相关，只要项目文件修改，整个项目的hash值就会更改

webpack中，有compile和compilation
在webpack启动的那一次，会创建compile对象
complilition是每次文件发生变化时，complition对象会不断变化，从而影响到hash

• Chunkhash：和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值

一般都使用这种Chunkhash

• Contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变

某个页面，既有JS资源，也有CSS资源，此时如果使用Chunkhash，会导致的问题的是，如果只修改了JS文件，而不修改CSS文件，打包发布的时候，未修改的CSS文件的Chunkhash也会发生变化
所以CSS文件一般使用Contenthash

JS的文件指纹设置

设置output的filename，使用[chunkhash]

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name][chunkhash:8].js',
    path: __dirname + '/dist'
  }
}

CSS的文件指纹设置

设置MiniCssExtractPlugin的filename，使用[contenthash]

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

如果是使用了style loader和css loader的情况，style loader会将css插入style，并放在头部，此时并没有一个独立的CSS文件
通过MiniCssExtractPlugin将style loader中的CSS提取成一个独立文件，所以是在MiniCssExtractPlugin书写filename

图片是文件指纹设置

设置file-loader的name，使用[hash]占位符，md5默认32位，[hash:8]表示取前八位

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: 'img/[name][hash:8].[ext]'
          }
        }]
      }
    ]
  }
}

综合练习

使用生产环境的mode
因为chunkhash无法与热更新HotModuleReplacementPlugin一起使用
此时使用的是webpack.dev.js，代表开发阶段的webpack配置
（生产环境的webpack配置为webpack.prod.js，在生产环境不需要代码的热更新）

….

注意
MiniCssExtractPlugin和style loader有冲突
所以要删除use里的style loader，改为MiniCssExtractPlugin.loader