[解決済み] webpackでCSSとJSを別々に生成することはできますか？

質問

私は持っています。

1. バンドルしたいJSファイル。
2. CSSにコンパイルしたいLESSファイル（@importを1つのバンドルに解決する）。

私は、これらを 2 つの別々の入力として指定し、2 つの別々の出力を持つことを望んでいました (おそらく extract-text-webpack-plugin を使用します)。Webpack にはコンパイルを行うための適切なプラグイン/ローダーがすべてありますが、分離が好きではないようです。

JS から直接 LESS ファイルを要求している例を見たことがありますが、例えば require('./app.less'); のように、JS から直接 LESS ファイルを要求している例を見ました。これは、webpack にこれらのファイルをバンドルに含めるように指示するためです。これは単一のエントリポイントを持つことを可能にしますが、私には本当に間違っているように思えます - 私の JS コードとは何の関係もないのに、なぜ私の JS で LESS を要求しなければならないのでしょうか?

複数のエントリポイントを使用して、エントリJSとメインのLESSファイルの両方を渡してみましたが、複数のエントリポイントを使用すると、webpackはロード時にJSを実行しないバンドルを生成します -- すべてをバンドルしますが、起動時に実行されるべきものを知りません。

私は webpack の使い方が間違っているのでしょうか？これらの別々のモジュールのために webpack の別々のインスタンスを実行するべきですか？JS に混ぜるつもりがないなら、非 JS 資産に webpack を使うべきなのでしょうか？

どのように解決するのですか？

JSに混ぜるつもりがないなら、JS以外のアセットにもwebpackを使うべきでしょうか？

そうではないかもしれません。Webpackは間違いなくjs中心で、あなたが作っているものはjsアプリケーションであるという暗黙の前提があります。その実装は require() の実装により、あらゆるものをモジュールとして扱うことができ（Sass/LESSのパーシャルやJSONなど、あらゆるものを含む）、依存関係の管理も自動的に行われます（あなたが require はバンドルされ、それ以外のものはバンドルされません）。

LESSは私のJSコードとは何の関係もないのに、なぜ私のJSにLESSを要求しなければならないのでしょうか？

アプリケーションの一部（ReactコンポーネントやBackboneビューなど）をjsで定義しているために、人々はこれを行います。アプリケーションのその部分には、それに付随するCSSがあります。jsモジュールから直接参照されず、別々に構築された外部CSSリソースに依存することは、壊れやすく、作業が困難で、スタイルが古くなるなどの可能性があります。Webpackはすべてをモジュール化しておくことを推奨しているので、そのjsコンポーネントに対応するCSS（Sassでも何でも）パーシャルを用意し、jsコンポーネント require() で依存関係を明確にします（あなたにとっても、ビルドツールにとっても、必要ないスタイルはビルドされません）。

CSSファイルがどのjsからも参照されない場合）webpackを使用してそれ自身でCSSをバンドルできるかどうかはわかりません。プラグインなどで配線することは可能だと思いますが、いきなりは無理でしょう。jsからCSSファイルを参照している場合は、おっしゃる通りExtract TextプラグインでCSSを別ファイルにバンドルするのが簡単です。