如何从 HTMLWebpackPlugin 块中为样式发出 CSS 块？

Question

我正在尝试将 CSS 模块用于 html，由 html-webpack-plugin 生成。

重现错误的代码

源代码/索引.ejs

<div class="<%= require('./item.css').foo %>"></div>

源代码/样式.css

<div class="<%= require('./item.css').foo %>"></div>

此代码与以下配置捆绑在一起，以某种方式工作（css 模块散列类名找到了生成的方式index.html）：

webpack.config.js

.foo {
  color: red
}

但问题是 CSS 块没有被 emmited。

% npm run build -- --mode production

> simple-nunjucks-loader-example-isomporphic@1.0.0 build /Users/user/Projects/nunjucks-loader/examples/isomorphic
> webpack "--mode" "production"

Hash: 5edf5687d32d114e6469
Version: webpack 4.41.5
Time: 526ms
Built at: 01/02/2020 10:51:04 PM
     Asset       Size  Chunks             Chunk Names
index.html   98 bytes          [emitted]  
   main.js  930 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 1.43 KiB {0} [built]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 283 bytes {0} [built]
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
    [4] ./src/item.css 68 bytes {0} [built]
        + 1 hidden module

当我添加mini-css-extract-plugin到配置以获取 CSS 块时，它会引发错误：

webpack.config.js

@@ -1,5 +1,4 @@
 const HTMLWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');

 module.exports = {
     module: {
@@ -23,9 +22,6 @@ module.exports = {
             {
                 test: /\.css$/,
                 use: [
+                    {
+                        loader: MiniCssExtractPlugin.loader
+                    },
                     {
                         loader: 'css-loader',
                         options: {
@@ -40,11 +36,7 @@ module.exports = {

     plugins: [
         new HTMLWebpackPlugin({
+            template: 'src/index.ejs',
+        }),
+        new MiniCssExtractPlugin(),
-            template: 'src/index.ejs'
-        })
     ]
 };

% npm run build -- --mode production

> simple-nunjucks-loader-example-isomporphic@1.0.0 build /Users/user/Projects/nunjucks-loader/examples/isomorphic
> webpack "--mode" "production"

/Users/user/Projects/nunjucks-loader/examples/isomorphic/node_modules/neo-async/async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (/Users/user/Projects/nunjucks-loader/examples/isomorphic/node_modules/neo-async/async.js:16:11)
    at /Users/user/Projects/nunjucks-loader/examples/isomorphic/node_modules/neo-async/async.js:2818:7
    at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! simple-nunjucks-loader-example-isomporphic@1.0.0 build: `webpack "--mode" "production"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the simple-nunjucks-loader-example-isomporphic@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2020-01-02T19_53_48_953Z-debug.log

通过从 JS 文件导入来加载相同的模板时，一切都按预期工作。

更新。临时解决方案是有2 个规则集，一个用于模板（w/outmini-css-extract-plugin和onlyLocals），一个用于 js，具有常规规则集，并在 JS 中复制相同的样式导入。

这并不理想，但会产生 html + css 模块。

const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            onlyLocals: true,
                            modules: true
                        }
                    }
                ]
            }
        ]
    },

    plugins: [
        new HTMLWebpackPlugin({
            template: 'src/index.ejs'
        })
    ]
};

% npm run build -- --mode production

> simple-nunjucks-loader-example-isomporphic@1.0.0 build /Users/user/Projects/nunjucks-loader/examples/isomorphic
> webpack "--mode" "production"

Hash: 5edf5687d32d114e6469
Version: webpack 4.41.5
Time: 526ms
Built at: 01/02/2020 10:51:04 PM
     Asset       Size  Chunks             Chunk Names
index.html   98 bytes          [emitted]  
   main.js  930 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 1.43 KiB {0} [built]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 283 bytes {0} [built]
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
    [4] ./src/item.css 68 bytes {0} [built]
        + 1 hidden module

Answer 1

我能够通过使用file-loader + extract-loader而不是：来处理“回调已被调用”错误mini-css-extract-plugin：

config.module.rules.push({
    test: /\.html?$/,
    use: [{
        loader: 'html-loader',
        options: {
            attrs: ['link:href', 'img:src']
        },
    }],
});
config.module.rules.push({
    test: /\.css(\?.*)?$/,
    use: [{
        loader: 'file-loader',
        options: {
            name: 'css/[name].[contenthash].[ext]',
        },
    }, 'extract-loader', 'css-loader'],
});

尽管我的情况有点不同：我的入口点是一个html带有引用的普通文件<link href="..."/>，ejs而不是 ，而且由于缺乏对ejs. 但我希望我的解决方案可以有所帮助。