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

Question

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

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

如果有人有任何想法会 great.Thanks

这是我的 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 以便在构建时注入 css，它支持设置哈希命名并允许您提供自己的 template。

Answer 2

这里是我对html-webpack-plugin（以下简称HWP）的基本理解。

HWP 似乎创建了一种元包，其中合并了所有包。您加载的 CSS、JS、HTML 包将在因此创建的 HWP 文件中重新组合。

每个加载文件的链接将自动添加到您的 HWP 包中。

请记住，HWP 文件的主体是任何文本的处女，因此，如何在这些条件下达到 HTML DOM 元素？*

如果您使用 Reactjs 或其他 JavaScript 库来构建用户界面，您将需要达到一些 DOM 元素。要在您的 HWP 中包含这些 DOM 元素，您只需加载一个 template 文件。此模板的内容将包含在您的 HWP 包中。因此，您可以访问 DOM 元素并可以处理 HTML 代码，太好了。

要创建模板，请在 webpack.config.js 中输入这些参数：

  plugins: [
           new HtmlWebpackPlugin({
            (...)
              template:  "path to your template.html",
            (...)                  
            })
  ];

请记住，您的路径会受到 webpack.config.js 的 context 的影响。

现在由你决定

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

Mini-css-extract-plugin - how grap the hash naming on index.html

css

plugins

reactjs

webpack.config.js