如何让index.html自动获取Mini-css-extract-plugin生成的带hash的CSS文件名

嗨，这个问题我之前也碰到过，手动改哈希名实在太折腾了，用html-webpack-plugin就能完美解决！它会自动识别webpack打包生成的所有动态资源（包括带contenthash的CSS、JS），并自动注入到最终的index.html里，完全不用手动维护文件名。

步骤1：安装html-webpack-plugin #

先在项目里安装这个插件：

npm install html-webpack-plugin --save-dev
# 或者用yarn
yarn add html-webpack-plugin -D

步骤2：修改webpack.config.js配置 #

先在配置文件顶部引入插件，然后在plugins数组中添加它的实例：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 新增：引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他配置（entry、output等）请保持不变
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.[contenthash].css'
    }),
    // 新增：配置html-webpack-plugin
    new HtmlWebpackPlugin({
      template: './index.html', // 指定你的源index.html文件路径
      filename: 'index.html' // 生成的html文件名，默认就是index.html，可省略
    })
  ],
  module: {
    rules: [
      // 你的loader规则保持不变
      {
        test: /\.js|jsx$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, "src"),
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["es2015", "stage-1", "react"]
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "./public" // 这里要确保和你的输出资源路径匹配
            }
          },
          { loader: "css-loader" }
        ]
      }
    ]
  }
};

步骤3：修改你的index.html #

把原来手动写死的CSS引用删掉，因为html-webpack-plugin会自动帮你注入：

<!-- 删掉这行：<link rel="stylesheet" href="styles.css"> -->
<!-- 页面其他内容保持不变即可 -->

原理说明 #

当你运行webpack构建时，html-webpack-plugin会读取你指定的模板文件（源index.html），自动扫描webpack输出的所有资源（包括mini-css-extract-plugin生成的styles.[contenthash].css），最后在生成的index.html中自动添加对应的<link>标签，比如：

<link rel="stylesheet" href="styles.abc123.css">

这样每次构建后的哈希值变化，都会自动同步到index.html里，完全不用手动修改。

内容的提问来源于stack exchange，提问作者HoCo_