問題タブ [mini-css-extract-plugin]

Webpack によって生成されるバンドルされた .css ファイルをより構成可能にしたいので、同じ .css ファイルに基づいて異なる「バージョン」を出力して、将来私のプロジェクトで作業する開発者の生活を楽にすることができます。

次の手順を実行したいと思います。

1. すべての SCSS を CSS に連結 ( bundle.css )
2. ステップ 1 の出力を最小化 ( bundle.min.css )
3. ステップ 2 のすべての画像を埋め込みます ( bundle.b64.min.css )
4. 手順 3 のすべてのフォントを埋め込みます ( bundle.bs64.fonts.min.css )

最終的に、ビルド プロセスの後、dist フォルダーに 4 つの異なるファイルが作成されます。それは私に可能でしょうか？

私が現在行っている方法では、ステップごとに異なるスクリプトを実行します - dist フォルダーを削除し、プロジェクトを通過し、出力を生成します。プロジェクトを 4 回実行しなくても、すべてを一度に実行できる単一のスクリプトが必要です。

ここで解決策を見つけました：

Webpack Extract-Text-Plugin は複数の CSS ファイルを出力します (縮小されたものと縮小されていないものの両方)

ただし、私の特定のケースでは、単一のオブジェクトではなく、配列で 4 つの異なる構成を返す必要があります。

いくつかのバニラ sass スタイルといくつかの css モジュール スタイルを含む単一の css ファイルを作成しています。モジュールcssが出力されたbundle.cssファイルの通常のcssの後に来るようにこれを制御する方法はありますか? 今はいつもその前です。

package.json で並べ替えてみました。oneOf を使ってみました。

次のwebpack.config.jsファイルを使用して、2 つの CSS ファイル (editor.css および style.css) とmini-css-extract-pluginプラグインを使用する JS ファイル (block.build.js) をビルドしています。

すべてが期待どおりに機能していますが、何らかの理由で、ファイルに加えて、名前が付けられた次の内容のblock.build.js2 つの JS ファイルを取得しています。0.block.build.js2.block.build.js

私の質問は、これらの 2 つの追加ファイルが作成されるのはなぜですか? また、これを回避するにはどうすればよいですか?

前もって感謝します

.scss2 つのファイルを 2 つの異なる.cssファイルに変換しようとしていtimer_player.cssますstyle.css。

にのstyle.cssスタイルを指定することはできませんtimer_player.css。

2 つのインスタンスを作成することでこれExtractTextPluginを行うことができますが、このパッケージは非推奨です。

私のフォルダツリーは次のようになります。