文件指纹如何生成

1. Hash:和整个项目的构建相关，只要有项目文件修改，整个项目构建的hash值就会更改
2. Chunkhash:和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值
3. Contenthash:根据文件内容来定义hash,文件内容不变，则Contenthash不变

JS的文件指纹

JS的文件指纹，主要通过设置Chunkhash output的filename

module.exports = {
  entry:'./src/index.js',
  output:{
    path:path.join(__dirname,'dist'),
    filename:'[name][chunkhash:8].js',
  },

设置css的文件指纹

设置MiniCssExtractPlugin的filename，使用【contenthash】

'use strict';

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry:'./src/index.js',
  output:{
    path:path.join(__dirname,'dist'),
    filename:'bundle.js',
    clean: true
  },
  module:{
    rules:[
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [ MiniCssExtractPlugin.loader, 'css-loader','less-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '管理输出',
    }),
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css',
    })
  ],
  mode:'production'
}