webpack中 hash contenthash chunkhash之间的区别

hash  是代码发生改变hash就会改变

contenthash  文件自身内容发生变化，才会更新

chunkhash  模块中的代码改变，导致引入这个模块的chunk发生改变，然后会引起相应的bundle文件发生变化

const path = require("path");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  // entry: {
  //   index: "./src/index.js",
  //   login: "./src/login.js",
  // },
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "[name]-[hash:6].js",
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          // miniCssExtractPlugin.loader,
          "kkb-style-loader",
          "kkb-css-loader",
          "kkb-less-loader",
        ],
      },
      {
        test: /\.js$/,
        use: [
          "replace-loader",
          {
            loader: "replace-loader-async",
            options: {
              name: "韩明洋",
            },
          },
        ],
      },
    ],
  },
  resolveLoader: {
    modules: ["./node_modules", "./myLoaders"],
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      chunks: ["main"],
    }),
    // new htmlWebpackPlugin({
    //   template: "./src/index.html",
    //   filename: "login.html",
    //   chunks: ["login"],
    // }),
    new CleanWebpackPlugin(),
    new miniCssExtractPlugin({
      filename: "css/index-[contenthash:6].css",
    }),
  ],
};