問題タブ [extract-text-plugin]

「angular2」アプリを作成しており、コンポーネントごとに特定の CSS ファイルをインポートしています。ヘッダーに複数の「スタイル」タグを含めるのではなく、すべての CSS を 1 つの大きなファイルにバンドルする必要があるため、「styleUrls」は使用していません。

さて、各 CSS ファイルには、コンポーネントが確実に反応するようにするためのメディア クエリがいくつかあります。さまざまなコンポーネントの CSS ファイルで同じメディア クエリを使用するように注意しました。

また、1 つの大きな CSS ファイルを作成するために、「extractTextPlugin」で「webpack」を使用しています。同じメディア クエリをすべてグループ化できるようにしたいと考えています。「group-css-media-queries-loader」パッケージを見つけましたが、動作させることができません。バンドルではなく、すべてのチャンクで起動すると思われます。「webpack.config.js」ファイルの関連部分は次のとおりです。

私が達成しようとしているのは次のとおりです。静的に生成されたWebアプリケーションをWebhookで再生成する高速サーバーがあります。そのためにwebpackを使用しています。webpack の CLI から静的サイトを生成すると、すべてがうまく機能します。ただし、ノード内から構成を webpack にインポートすると、Webpack オプションの検証エラーが発生します。

これを少しデバッグした後、WebpackExtractTextPlugin を使用するたびにローダー、つまりローダーが追加されていることがわかりました。

{ loader: 1178, options: [Object] }

これは私の共有 webpack.js がどのように見えるかです:

webpack.static.js上記をこれとマージします：

その追加のローダーがどこから来たのか、またはこの問題を引き起こすために他に何が間違っているのか、誰かが考えていますか??

私が使用している: webpack@2.2.1 extract-text-webpack-plugin@2.1.0

プロジェクトのために古代の技術スタックに閉じ込められて数年を過ごした後、私はついに最新のフレームワークを探索し、React と Webpack に足を踏み入れる機会を得ました。これまでのところ、大部分はさわやかで楽しい経験でしたが、集合意識が解決してくれることを願って、Webpack でいくつかの問題に出くわしました。

私はWebpack 2.0のドキュメントを熟読しており、SOをかなり徹底的に検索しましたが、不足しています(この質問を取り上げただけで、これは近いですが、それが当てはまるかどうかはわかりません)。このように情報が不足しているため、次の 2 つのシナリオのいずれかを見ていると思います。

1. 私がやろうとしていることは正気ではありません。
2. 私がやろうとしていることは、簡単にできるという点で初歩的なことです。

...それでも、私はここにいます。

私が探しているものの短いバージョンは、環境変数に基づいて、特定の JSX コンポーネントが Webpack ビルド/バンドルに含まれないようにする方法です。現時点では、エントリ js 以降に基づいて依存関係ツリーがどのように見えるかに関係なくimported、Webpack はすべてをプロジェクト フォルダーにバンドルしたいと考えているようです。

これはデフォルトの動作であると思います。これには意味があるためです。アプリケーションには、初期状態以外の状態のコンポーネントが必要になる場合があります。ただし、この場合、「アプリケーション」は完全にステートレスです。

背景を説明するために、プロジェクトの大まかな要件を次に示します。

• プロジェクトには、構成ファイルに基づいてページにアセンブルし、テーマを指定できるコンポーネントのバケットが含まれています。
• これらの各コンポーネントには、SASS で記述された独自のモジュラー CSS が含まれています。
• エクスポートされた各ページは静的であり、バンドルは実際にはエクスポート ディレクトリから削除されます。(はい、プロジェクトが一連の単一の静的なページを単にレンダリングするだけで終了する場合、React は少し過剰です。プロジェクトの将来の状態には、これに加えて React がかなり適しているはずの UI が含まれますが、 -- したがって、これらのコンポーネントを今すぐ JSX で作成するのが最善です。)
• CSS は以下を使用してバンドルからextract-text-webpack-plugin取得されます。最終的なエクスポートでは、要素にスタイルが直接インライン化されることはありません。これは変更可能な要件ではありません。
• ページのテーマ情報の一部として、SASS 変数が設定され、SASS によって各 JSX コンポーネントに使用されます。
• 特定のページの構成ファイルで参照されている JSX コンポーネントの SASS 変数のみがコンパイルされsass-loader、CSS のコンパイル時に使用するために渡されます。

物事が分解される場所は次のとおりです。

component_1、、、などの便利なタイトルの5 つの JSX コンポーネントがあるcomponent_2とcomponent_3します。これらのそれぞれには.scss、次の方法で含まれる、関連付けられている一致するファイルがあります。

ここで、2 つのページがあるとします。

• page_1を含みcomponent_1、component_2
• page_2component_3、component_4、および を含むcomponent_5

layoutこれらのページは両方とも、次のような方法で使用するブロックを決定する共通のコンポーネントを使用して構築されています。

上記は、(特定のページに) 必要な JSX コンポーネントを含むオブジェクトを反復処理します。これは、現時点では次の方法で作成されます。

したがって、大まかな流れは次のとおりです。

1. ページ構成から含まれるコンポーネントのリストを収集します。
2. requireそのようなコンポーネントごとに forを実行し、コンポーネント名をキーとして結果を格納するオブジェクトを作成します。
3. このオブジェクトをステップ実行し、これらの JSX コンポーネントをそれぞれ に含めますlayout。

したがって、依存関係ツリーに従うだけであれば、これはすべて正常に機能するはずです。ただし、Webpack は、実際に何をロードしているかに関係なく、すべてのコンポーネントを含めようとしています。ページで実際に使用されるコンポーネントの SASS 変数のみをロードしているため、未使用のモジュールに関連付けられた SASS ファイルを処理しようとすると Webpack がエラーをスローします。layoutundefined variablesass-loader

ここで注意すべき点: 静的ページは問題なくレンダリングされ、Webpack の開発サーバーでも動作します... 大量のエラーが発生し、Webpack がうまくいきません。

私の最初の考えは、これに対する解決策は、JSX ファイルに使用しているローダーの構成にあるということです。おそらく、Webpack がすべてをロードしようとしている場合、何をロードしないかをローダーに伝える必要がありました。そのために「babel-loader」を使用しています：

そこのexcludeエントリは新しく、機能していないようです。

これは中編小説のようなものですが、私は情報が不足しているのではなく、情報が多すぎると誤解したかったのです。簡単なことを見逃しているのでしょうか、それともクレイジーなことをしようとしていますか? 両方？

未使用のコンポーネントをWebpack で処理しないようにするにはどうすればよいですか?