css - Mini-css-extract-plugin - 如何在 index.html 上抓取哈希命名

Question

我目前正在尝试实现 mini-css-extract-plugin。

我无法实现散列命名，当我使用它时，我不知道如何引导我的 index.html 文件即时获取特定名称。

如果有人有任何想法就太好了。谢谢

这是我的 webpack.config.js :

plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'styles.[contenthash].css'
    })
  ],
module: {
   rules: [ {
     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"
   }]
 }

]},

这里是我的 index.html:

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

如何在我的 html 中翻译我的 css 文件名的“[contenthash]”部分？

Answer 1

您可以使用 html-webpack-plugin为了在构建时注入(inject) css，它支持设置哈希命名并允许您提供自己的模板。