問題タブ [webpack]

私はwebpackが初めてで、reactjsで使用したいのですが、今は混乱しています。webpackを使ったクライアントサイトの開発工程でcssがどのように扱われているか知りたいです。webpack がすべての js をバンドルし、bundle.js としてリンクしていることを知っています。これ<script src="http://localhost:3000/assets/bundle.js"></script>は、webpack-dev-server の構成に基づいて、html ファイルで参照します。今、私はcssファイルも持っています。これはどこに行くのですか？私のhtmlファイルでこれを参照するための私のURLは何でしょうか。style-loader と css-loader と ExtractTextPlugin があることは理解していますが、出力はどこに属しますか? できることがわかりましたvar css = require('path/customStyle.css')しかし、それが表示される場所が見えないようですか？これは index.jsx ファイルで行います。だから彼の質問：これをまとめる方法、私のcustomStyle.cssを参照できること。私は何を間違っていますか、または私は何を見逃していますか これが私のプロジェクトフォルダ構造です:

私のwebpack.config.jsは次のようになります

HTML ファイルは次のようになります。

webpack の方法がどのように機能するか、および私のスタイルをどのように取り込むかについての背景についての助けは素晴らしいでしょう.

私のチームと私は現在、かなり大規模なプロジェクトを AMD + RequireJS から CommonJS + Webpack に移行中です。私たちは Webpack が提供するツールを気に入っており、CommonJS はコミュニティが向かっている方向であると考えています。

webpack を利用して .mustache テンプレート ファイルを自動的に読み込んでバンドルする効果的な方法は何ですか? 現在、xportを使用して、プロジェクト フォルダー内のすべての .mustache ファイルを次の形式の単一の js ファイルにバンドルする監視スクリプトがあります。

これを完全に使い続けることができます... 現在のソリューションの特に便利な点は、新しいテンプレートを作成するときに、プロジェクト内のテンプレートを特に参照する必要がないことです。スクリプトはフォルダーを監視しているだけなので、辞書が更新され、別のライブラリを使用して文字列を取得し、使用可能なテンプレート関数にすることができます。

じゃあゴールは？ 私たちのフォルダー内のテンプレートから移動する方法があるかどうか興味があります->プロジェクトにファイルを特に要求することなくコードで使用できる関数。そして、私たちの現在のソリューションは webpack の外に出ています (もちろんフックする方法がない限り)。これは、2 つのウォッチ スクリプトが必要ないため面倒です。ローダーを調べましたが、これらは 1 対 1 のソース ファイル -> 出力ファイルと多対 1 のように見えます。これが現在のソリューションの優れた点です。

ありがとう！

sass ファイルで font-family 変数を指定しようとしていますが、残念です。サスの定義は次のとおりです。

奇妙なのは、引用符を削除するLatoと、Helvetica Neue問題なくコンパイルされることです。そうしないと、次のエラー メッセージが表示されます。

アップデート

さらに奇妙なのは、エラーが生成されても、実際にはファイルがコンパイルされ、css がそこにあるということです。

私はreactJS-webpack-gruntアプリを持っています。

それぞれ独自の設定を使用して、さまざまな環境にアプリをアップロードしたいと考えています。現在、私は1つのsettings.jsファイルを持っています.webpackがそのことを行うとき(gruntビルドまたはサーブ)、設定は 内に隠されassets/main.jsます.

var settings = require('settings');現在、私が行った設定を使用するすべてのファイルで:webpack.config.jsエイリアスを宣言しました

私の意図はsettings、JSON のような構造を持つ別のファイルを用意して、技術者以外の人が簡単に変更できるようにすることです。また、同じコードをコンパイルするたびにアプリを数回アップロードしても、そのままにしておくことができsettings.jsます。

これを行うとうまくいきます：

ただし、これを別のファイルに移動し、CommonJS/webpack を使用してエクスポートすると、次のようになります。

（そのようです：）

...

それはおそらく非常に明白ですが、私の心の中では、なぜそれがうまくいかないのかわかりません:/

私の2つの問題が関連しているかどうかはわかりませんが、可能性があると考えたので、ここに行きます.

私は（webpack / commonjsを使用して）Reactをいじっていますが、基本的なレベルの成功を収めています。コンポーネントがページに正常にレンダリングされます。

残念ながら、イベントは機能しておらず (単純なクリック ハンドラーのテストでも)、私の React 開発ツールは私の階層をまったくロードせず、<Top Level></Top Level>. 公開ローダー (開発ツールの問題を処理するため) を試しましたが、役に立ちませんでした。

どんなアイデアでも大歓迎です！

編集:イベントハンドラーが読み込まれていることを知っていることはおそらく言及する価値があります(たとえば、コンソールにログを記録する関数への参照をハンドラーとして渡すと、メッセージが表示されます)。イベント自体は単に発生していないか、ハンドラーに向けられていません。

編集2：また、（この問題に対して一般的に提案されている解決策に基づいて）開発ツールのウィンドウにReactを公開しようとしたこと、およびReactホームページのような場所に行くと、反応開発ツールが正常に機能することも注目に値します.

PapaParse を使用して、ファイル入力から csv ファイルをロードしています。

現在、スクリプトタグを使用して PapaParse をロードする作業バージョンがあります。

そして、変更イベントを処理します:

私は今、webpack を使用して js をバンドルしたいと考えており、グローバル名前空間に毎回ではなく、必要なときに動的に PapaParse をロードしたいと考えています。このようなもの：

残念ながら、これによりPapaParse ライブラリの次の行Uncaught ReferenceError: Papa is not definedからエラーが発生します。

これを機能させる方法はありますか？

[編集]

私はrequirejs / webpackにまったく慣れていないので、これがこれを修正する正しい方法であるかどうかはわかりませんが、次のシム構成を使用して、これを機能させることができました（残念ながら、ウィンドウの名前空間をまだ汚染しています） ：

私が理解しているように、最初のディレクティブ ( imports?this=>window) は imports loader を使用して、globalパラメーターを (空のオブジェクトではなく) ウィンドウ オブジェクトに設定します。これにより、PapaParse の呼び出しが機能しますglobal.document(global.postMessage()また、修飾されていない呼び出しもPapa機能するようです。つまり、接頭辞が付いていないものglobal.Papa)。2 番目のディレクティブ ( exports?global.Papa) は、require 呼び出しから返されたオブジェクトとして Papa オブジェクトがエクスポートされることを意味します。

これがこれに対処する正しい方法であるかどうか、webpackの経験がある人がアドバイスできるかどうか興味がありますか?

そのため、webpack を使用してクライアント側の js をパックする独自の js クラスを作成しています。ページに含めるサードパーティ ライブラリであるこの「soundManager」オブジェクトを使用する必要があります。SoundManager は実際には window.soundManager に存在します...私の質問は、SoundLoader クラスの window.soundManager でこのオブジェクトにアクセスするにはどうすればよいですか?

どんな助けでも大歓迎です！

ありがとう！

以下に貼り付けたrequire configからロードされるrequirejsアプリがあります。vendor ディレクトリへのパス参照は、bower を介してロードされたサードパーティのライブラリです。

コンソールに表示される問題は、ブートストラップ ファイルが見つからないというもので、require.config.

$ webpack ./app/config/requirejs.js ../build/test.js Hash: f33deaf4b2ff288e08b6 Version: webpack 1.5.3 Time: 61ms Asset Size Chunks Chunk Names test.js 2435 0 [emitted] main [0] ./ app/config/requirejs.js 1691 {0} [ビルド] [3 エラー]

./app/config/requirejs.js のエラー モジュールが見つかりません: エラー: /Users/glitches/Sites/public/js/app/config @ ./app/config/requirejs.js のモジュール 'bootstrap/backbone' を解決できません35:0-45

./app/config/requirejs.js のエラー モジュールが見つかりません: エラー: /Users/glitches/Sites/public/js/app/config @ ./app/config/requirejs.js のモジュール 'bootstrap/jquery' を解決できません36:0-43

./app/config/requirejs.js のエラー モジュールが見つかりません: エラー: /Users/glitches/Sites/public/js/app/config @ ./app/config/requirejs.js のモジュール 'init/Main' を解決できません39:0-41

エントリーポイントとしてrequirejs構成を書き直す必要があると思いますが、これについてのより良いアイデアを誰かが持っている場合に備えて、ここで尋ねています。

Webpack と AngularJS をどのように組み合わせて使用​​しますか? また、テンプレートの読み込みとリソースのオンデマンド フェッチについてはどうですか?

この目的のために適切に作成されたファイルの例は、webpack.config.js非常に高く評価されます。

ここに表示されるすべてのコード スニペットは、この github リポジトリでアクセスできます。コードは、この packetloop git repoから寛大に適用されています。

webpack.config.json

AngularJS をメインにインポートapp.jsするには、次のようにします。

アプリ/ベンダー/angular.js

そして、それを次のapp.jsように使用します。

app.js

以下は正しいですか？これを行う簡単な方法はありますか？別の方法をリストしたいくつかの（どの標準から見ても多くはない）投稿を見てきました。

このreddit投稿コメントから

stackfull/angular-seedには、現在開発中の別のプラグインもあります。正しい方向にあるように見えますが、今は本当に使いにくいです。

Webpack は非常に優れていますが、ドキュメントとサンプルが不足しているため、役に立ちません。