問題タブ [webpack]

コンポーネントに React を使用しており、スタイルをコンポーネントにパッケージ化するために、文書化された webpack メソッドに従ってスタイルを要求しています。 require('./style.css'); しかし、サーバーでレンダリングしようとすると、node-jsx がエラーをスローします。 css を変換しようとしたとき。cssで壊れないjsxを変換する別の方法はありますか? スタイルを独自のパイプラインに分割するのは避けたいと思います。これは、コンポーネントをパッケージ化する Webpack の利点がうまく失われるからです。

css プリプロセッサ (less/scss/styl) を使用しているときに、webpack でソースマップ (css) を正常に生成した人はいますか?

次のような連鎖ローダーを使用してみました。

webpack.config

ただし、ソースマップには、(ソースではなく) less からコンパイルされた出力が表示されますが、正しいファイル名が表示されます。

何でもない

次の内容で /absolute/path/to/whatever.less にマッピングされます

@redに何が起こったの？

モジュールが必要な場合は、独自の規則があります。たとえば、次require("./components/SettingsPanel");のように解決する必要がありますrequire("./components/SettingsPanel/SettingsPanel.js");

そのようなリゾルバーを作成する方法はありますか?

material-uiを webpack で使おうとしています。ただし、chrome dev-tool でエラー メッセージが表示されました。

私のwebpack.config.js:

webpack で material-ui を要求する方法についていくつか提案が必要です。ありがとう。

内のコンポーネントを探すために webpack を取得できましたbower_components。bower コンポーネントにファイルのみが含まれ、ファイルが含まれ.bower.jsonていない場合に問題が発生しbower.jsonます (最初のファイル名の前に が付くことに注意して.ください)。

私のファイルの簡略版はwebpack.config.js次のようになります。

jquery.selectBoxItを bower コンポーネントとして使用しようとしています。もう 1 つの問題は、ファイルにmainフィールドがないことです。.bower.json価値があるので、そのファイルを以下に含めました。

最近、react と webpack の使用を開始しましたが、ほとんどの点で優れていますが、テスト時にアプリが iframe にレンダリングされ、ルート以外のルートを直接読み込むことができなくなります。したがって、テストしたい場合はhttp://localhost:8000/#/signin、その URL を読み込むことはできませんが、代わりにベース URL を読み込んで、サインイン ページを指すリンクをクリックする必要があります (または、少なくともそれが機能することがわかった唯一の方法です)。 ）。

これを行うより良い方法はありますか？

これは、かなりハックなソリューションを備えた同様の質問です。あれから何か変わったことはありますか？

反応コンポーネントを構築するために webpack を使用しextract-text-webpack-pluginており、生成された js ファイルから css を分離するために を使用しようとしています。ただし、コンポーネントをビルドしようとすると、次のエラーが発生します: Module build failed: ReferenceError: window is not defined.

私の webpack.config.js ファイルは次のようになります。

ルート Javascript ファイルを含む任意の HTML ファイルにWebpack で Javascript ファイルをスキャンして挿入し、(それぞれ) 挿入する方法はありrequire("file.js")ますrequire("file.css")か<script type="text/javascript">?<link rel="stylesheet">

例えば。与えられた:

Main.html

Main.js

この出力が得られることを期待しています：

Main.html

ボーナス ポイント: 機能require("login.scss")と結果<link rel="stylesheet" type="text/css" href="login.css"/>(つまり、SCSS ファイルが CSS に変換されるという事実を考慮してください)。

次のような 3 つのエントリ ポイントと共有ライブラリを含むプロジェクトがあります。

私がやりたいのはLibA、EntryC にはない共通のチャンクを入れることです。CommonsChunk プラグインを試してみましたが、何が起こるかというと、定義したチャンクが取得するだけでLibAなく、ライブラリも取得します。EntryAEntryB

ドキュメントによると、チャンクを作成するとエントリからライブラリを削除する必要がありますが、機能しないようです-削除するEntryCと機能するため、webpackがそれを共通チャンクに強制しないと思われますEntryC。これを使って。

何とかそれをオーバーライドできますか？

さて、これは奇妙なものです。ページの下部に Google タグ マネージャー スクリプトを追加し、コンテナーを公開しましたが、すべてのタグを削除しました (タグの 1 つが原因であった場合に備えて)。私のコード スニペットは次のようになります。

タグ アシスタント コードの何かがハングして、ページが数秒間応答しなくなったようです。

このスクリーンショットを見るonreadystatechangeと、ほぼ 3200 ミリ秒かかっていることがわかります。

もう少し詳しく説明すると、node/react/webpack を使用してサーバー側のレンダリングを行っています。サーバーでレンダリングしているページ テンプレートは次のとおりです。

これは Google タグ マネージャーを使用する初めての試みなので、構成に問題があるかどうかはわかりません。助けに感謝します。

アップデート

という一般的な webpack バンドルがありcommon.jsます。[ネットワーク] タブによると、Google タグ マネージャー スクリプトによって 2 回目のダウンロードが強制されているようです。本当に奇妙です。