Mini-css-extract-plugin - 如何掌握 index.html 上的哈希命名

Posted 2023-04-13

【中文标题】Mini-css-extract-plugin - 如何掌握 index.html 上的哈希命名

【英文标题】：Mini-css-extract-plugin - how grap the hash naming on index.html

【发布时间】：2018-10-24 17:40:50

【问题描述】：

我目前正在尝试实现 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]”部分？

【参考方案1】：

您可以使用html-webpack-plugin 在构建时注入css，它支持自定义哈希命名并允许您提供自己的template。

【讨论】：

实际上，文档表明：(html-webpack-plugin) 是一个 webpack 插件，它简化了 HTML 文件的创建以提供 webpack 包。这对于在文件名中包含哈希值的 webpack 包特别有用，它会更改每次编译。

【参考方案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 的影响。

现在由你决定