webpackスタイルのローダーはすべてのCSSをロードするためのものですか？それともアプリケーション固有のCSSですか？
フロントエンドの設計プロセスをよりモジュール化しようとしており、 webpack を検討しています。 スタイルローダー をサポートします。これにより、cssファイルをインポートして、次のようにドキュメントに挿入できます。
require("style/url!file!./file.css");
// => add a <link rel="stylesheet"> to file.css to document
しかし、私の主な焦点はウェブサイトであり、ウェブアプリではありません1、JavaScriptを介してCSSを追加するのは奇妙に感じます。しかし、私は昔ながらのことかもしれないので、疑問に思っています。ローダーはすべてのcssに使用されることを意図しているのでしょうか、それともcssの小さな条件付き部分のみをロードすることを意図しているのでしょうか。
また、すべてのcssの読み込みに使用できる場合、生成されたwebpackを使用するとペナルティが発生しますbundle.js htmlでcssファイルを直接リンクするのではなく、cssを挿入しますか？それに加えて、JavaScriptが有効になっていないと明らかに壊れますか？
1：違いは、動的コンテンツがほとんどないこと、javascriptがこれらのウェブサイトで果たす役割は小さいこと、javascriptでルーティングしていないが、ページ用の静的な.htmlファイルがあることです
可能であれば、HTML自体にCSSを含めます。最近のブラウザは、ページの解析中にCSSのフェッチを開始します。これは、JavaScriptのダウンロードが開始される前の場合もあります。ローダーの外部で主要な部分を実行すると、ページのレンダリング速度が向上します。
さらに、主要な「コア」スタイルに固執する場合は、JavaScriptよりも高速にロードされるキャッシュの恩恵を受けることができます。
http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/
あなたの例では、それを複数の部分に分割し、ページにロードした特定の要素にローダーとバンドラーを使用してそれを行いました。アプリケーションのルックアンドフィール、ブランディングなどはマークアップから読み込まれ、特定のUIを制御する動作（特定のフォームのレイアウトなど）は、バンドラーまたはパッカーを使用して実行されます。