Webpack Html Web包插件将哈希css注入Html

我正在尝试将css文件注入index.html。目前，我的web包执行以下操作

将我的SASS转换为CSS

用哈希值命名css文件（例如optionA-32d6cb.css）

放入./dist文件夹

文件夹结构的输出：

- Dist
   - OptionA
        - optionA-hash.css

   - OptionB
        - optionB-hash.css

   - index.html //How to inject above css into this file?

我不熟悉HtmlWebpackPlugin我的问题是如何将上述动态css文件注入index.html？因此，在标题部分，我有以下内容：

<link href="optionA-32d6cb.css" rel="stylesheet">
<link href="optionB-w2d6cb.css" rel="stylesheet">

您可以使用解决此问题，它将在dist/文件夹中创建manifest.json文件

menifest.json文件将包含以下所有映射

{
    "app.css": "css/app.dc4d6b6c65b4f5ff351e.css"
}

然后使用HtmlWebpackPlugin，它将在每次构建时执行此任务，它将通过引用manifest.json将正确的文件注入index.html

请参阅webpack/webpack.common.config.js文件中的确切工作实现。（使用节点12.x在初学者工具包中创建内部版本）

---

注意：从index.html模板中删除脚本和链接标记，它将自动注入。

条目的值应为.js文件的路径：

我建议使用。 它将把你的CSS提取到单独的文件中

然后，您的webpack.config可能如下所示：

'use strict';

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    app: './main.js',
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[hash].js',
  },
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html'),
    }),
  ],
};

main.js

import './style.scss';

style.scss

body {
  background: #fefefe;
}

---

如果您希望css文件位于

/dist

文件夹中的特殊路径中，您可以为插件定义谢谢您的评论，manifest.json文件如何链接到index.html。我没在你的代码上看到那部分？我能够在dist上生成清单，其中包含答案中所示的引用，但未链接到index.htmlHtmlWebpackPlugin。htmlhtmlhlwebpackplugin自动使用正确的HTML标记注入所有资产（例如bundle.js、main.css）。请从模板HTML中删除所有脚本和链接标记（请参阅react enterprise starter kit中的public/index.HTML），并尝试在HtmlWebpackPlugin配置对象中添加inject:true选项。仍不工作，你能看看我的作品吗？我为你创建了一个链接。你处理SCSS文件的方式有问题。Scss文件需要Scss加载器和CSS加载器才能最终将其转换为CSS。此外，我们还需要ExtractCssChunks插件来正确创建CSS块。请参考：请看一下代码，让我知道这个问题是否解决了。出色的工作，非常感谢你这是更好的，但我不希望css合并成一个？如何使每个文件名都有css，以便其app.css和legacy.css？它应该基于sass文件名匹配？这对我不起作用，因为我在sass文件中使用globbing来导入给定目录中的所有SAS。我目前正在我的sass加载程序中使用GlobImporter，上述操作将失败，因为它不尊重通配符（*）你可以用webpack的require.context替换你的glob导入：那么这个设置可以运行，你不必解释导入每个文件。你有没有一个例子说明如何实现这一点，因为我是webpack的新手，不太确定如何将此上下文用作webpack configwith require.context的一部分，您可以在脚本中导入所有.scss文件，例如：

main.js

``const context=require.context（'./styles'，false，/\.scss$/）```使用

require.context

可以导入脚本中的所有

.scss

：

main.js

const context=require.context（'./style'，false，/\.scss$/）；context.keys（）.map（context）这里还有一个示例：
body {
  background: #fefefe;
}