web-dev-qa-db-ja.com

HTMLWebpackPluginチャンクからスタイルのCSSチャンクを出力する方法は？

私はhtml-webpack-pluginによって作成されたhtml用のCSSモジュールを使用しようとしています。

エラーを再現するコード

src/index.ejs

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

src/styles.css

.foo {
  color: red
}

次の設定にバンドルされているこのコードは、なんとか機能しています（cssモジュールのハッシュされたクラス名がindex.htmlを生成する方法を見つけます）。

webpack.config.js

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'
        })
    ]
};

しかし問題は、CSSチャンクがエミットされないことです。

% npm run build -- --mode production

> [email protected] 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

> [email protected] 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! [email protected] build: `webpack "--mode" "production"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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ルールセットを持ち、1つはテンプレート（w/out mini-css-extract-pluginおよびonlyLocals）に、もう1つはjsに、通常のセットでルール、およびJSで同じスタイルのインポートを複製します。

理想的ではありませんが、html + cssモジュールを生成します。

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

                    {
                        issuer: /\.js$/,
                        use: [
                            {
                                loader: MiniCssExtractPlugin.loader
                            },
                            {
                                loader: 'css-loader',
                                options: {
                                    modules: true
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
};

import './item.css';
webpackhtml-webpack-pluginmini-css-extract-plugin
6
Lesha Ogonkov

mini-css-extract-pluginの代わりに file-loader + extract-loader を使用して、「コールバックがすでに呼び出されました」エラーに対処できました。

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の知識がないため。しかし、私の解決策が役に立てば幸いです。

1
Klesun