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在构建时注入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上的哈希命名

2 个答案: