webpack之文件指纹如何生成

·

• Hash: 和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改
• Chunkhash(JS文件): 和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值
• Contenthash(CSS文件):根据文件内容来定义hash，文件内容不变，则contenthash不变
• 图片的文件指纹设置使用[hash]

设置MiniCssExtratPlugin的filename,使用[contenthash]
如果不使用MiniCssExtratPlugin正常情况下我们使用了style-load或css-load则会把样式提取出来放入到header的style里面，并没有独立的文件，所以使用MiniCssExtratPlugin提取成独立的文件

plugins: [
new MiniCssExtractPlugin({
	filename: `[name]_[contenthash:8].css`
})
]

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