Html Webpack Plugin 将 hash css 注入 html

Question

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

1. 将我的 SASS 转换为 CSS
2. 用哈希命名 css 文件（例如 optionA-32d6cb.css）
3. 放入 ./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">

我的 webpack.config.js 文件：

module.exports ={
entry: ['path_to_scss_file'],// SASSfile which contains import statment with wildcard to get all sass in given directory
output: {
    filename: "[name].min.js",
    path: path.resolve(__dirname, 'dist/'),
},
plugins:[
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
],
module:{
    rules: [
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'file-loader',
                    options:{
                        name:'[name]/[name]-[contenthash].css',
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                      sassOptions: {
                             importer: globImporter(), 
                     //my sass files uses wildcard to import all sass files
                      },
                     },
                }
            ]
        }
    ]
}

Answer 1

您可以使用webpack-manifest-plugin 来解决这个问题，这将在 dist/ 文件夹中创建一个 manifest.json 文件。

manifest.json 文件将包含所有这样的映射

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

然后使用HtmlWebpackPlugin，它会在你每次构建时完成工作，它会通过引用manifest.json将正确的文件注入index.html

请参阅 https://github.com/anandgupta193/react-enterprise-starter-kit 以获取 webpack/webpack.common.config.js 文件中的确切工作实现。 （使用 node 12.x 在入门工具包中创建构建）

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

Answer 2

entry 的值应该是 .js 文件的路径：docs

我建议使用mini-css-extract-plugin。 它会将您的 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 文件夹中的特殊路径中，您可以为插件定义 options