webpack - Html Web Pack 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
                      },
                     },
                }
            ]
        }
    ]
}

标签： webpackhtml-webpack-plugin

Answer 1

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

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

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

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

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

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