問題タブ [webpack]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
31 に答える
88797 参照

javascript - webpack --watch は変更されたファイルをコンパイルしていません

実行webpack --watchしてみましたが、JS ファイルを編集した後、自動再コンパイルがトリガーされません。

webpackを使用して再インストールを試みましnpm uninstallたが、まだ機能していません。

何か案は?

0 投票する
4 に答える
22177 参照

javascript - バイパス プロキシを使用する Webpack-dev-server

webpack-dev-serverで「proxy」( grunt-connect-proxy に似た) オプションを実現するには?

Grunt でwebpackwebpack-dev-serverを使用しています。Gruntfile.js (以下のコード) のタスクは、ポート 8080 でサーバーを起動できます。すべてのバックエンド データ リクエスト (コンテキスト URL /ajax/*) のプロキシ設定を追加したいと考えています。

0 投票する
3 に答える
5647 参照

javascript - webpack-dev-middleware が出力をフォルダーにコンパイルしない

サーバーで webpack-dev-middleware を使用して、次のように JavaScript をコンパイルしています。

開発中はすべて正常に動作します。ビューにバンドルを含めることができます。しかし、それらは「dist」に組み込まれていないため、本番環境では含めることができません。このフォルダは常に空です。私は何を間違っていますか?誰かがアイデアを持っていますか?

宜しくお願いします。

0 投票する
1 に答える
27931 参照

coffeescript - CodeKitのようにscssとjavascriptを縮小して結合するためにwebpackをセットアップするにはどうすればよいですか?

0 投票する
5 に答える
14676 参照

javascript - assign の左側に Javascript オブジェクト ブラケット表記 ({ Navigation } =)

私はこれまでこの構文を見たことがなく、それが何であるか疑問に思っています。

左側の括弧は構文エラーをスローしています:

予期しないトークン {

webpack構成のどの部分が変換されているのか、または構文の目的が何なのかわかりません。ハーモニーの事ですか?誰かが私を啓発できますか?

0 投票する
2 に答える
2656 参照

javascript - Webpack がバンドル出力で構文エラーを引き起こす

私はしばらくの間、Webpackが原因であると思われる問題に苦しんでいます。

基本的に、クライアントに提供するためにWebpackにバンドルしているノードベースのアプリがあります(これはReactJSベースのアプリです)。この問題は、Tabletop NPM パッケージをインストールしてrequired したときに発生しました。

ブラウザーで作成された Webpack を読み込もうとするとbundle.js、構文エラーが発生します。

Uncaught SyntaxError: Unexpected identifier

のこの行について不平を言っていますbundle.js

target[capName] = __webpack_require__(387)(""path + '/' + name);

掘り下げた後、この行はHoekライブラリ (Tabletop のサブ依存関係) の行に由来することがわかりました。

target[capName] = require(path + '/' + name);

明らかに、Webpack はここで奇妙なことを行っています。

原因の切り分けには至りませんでしたが。Tabletop には NodeJS の使用例が含まれており、これを Webpack して問題なく実行できました。

また、上記のような不正な変換を確認することなく、Hoek のクローンを作成して Webpacke しました。

これが Webpack、Hoek、または Tabletop の問題であるかどうかはわかりません。そのため、ここに投稿しています。

ここでもGHでも、関連する問題は見つかりません。

すべての助けに感謝します!

0 投票する
1 に答える
359 参照

javascript - 既存の JavaScript アプリケーションでノード モジュールを使用できますか?

私の目標は、既存の JavaScript アプリケーションでノード モジュールを使用する方法を理解することです。

私の既存のアプリケーションは jQuery と ReactJS ベースです。

プロジェクトで使用を開始したいいくつかのノード モジュールに遭遇しました。これらはモジュールとしてのみ使用できるようです (そのため、scriptタグを追加するだけでは使用できません)。

以前は、ライブラリをインストールして、タグbowerを使用してローカルで使用していました。script

Browserify多数の Node モジュールを単一の JavaScript ファイルに使用またはWebpackバンドルできることは理解していますが、その中にあるモジュールを既存のアプリに公開するにはどうすればよいですか?

できるようになりたいのは

wheremyapp.jsはグローバル変数を使用して、module_xどちらが npm モジュールであったかを指定できます。

私が予見する問題の 1 つは、bundle.jsjquery が既に含まれている可能性があるということです。「プロジェクト全体をモジュールに変換する」と言う人もいるかもしれませんが、それはうまくいくでしょう! しかし、すべての利点にもかかわらず、それを行わずに実行できるかどうか疑問に思っています;-)

0 投票する
3 に答える
3350 参照

heroku - herokuでwebpackをビルドするには?

Heroku にデプロイした後に Webpack ビルドをトリガーする最良の方法は何ですか?

最も美しいソリューションではない、既にバンドルされているバージョンをプッシュします。

0 投票する
0 に答える
832 参照

javascript - Webpack: 変数を使用して自動的に解決された依存関係を要求できません

JavaScript の依存関係を管理するために Webpack を使用して Web アプリに取り組んでいるときに、これから説明する問題に遭遇しました。

文字列を渡す依存関係のロードrequire()は美しく機能します:

は Bower と共にインストールされ、 Webpackjqueryは Bower モジュールを自動的に解決するように正しく構成されています。

現在、モジュールを条件付きでロードする問題に取り組んでいます。特に、モジュールを CDN からダウンロードする必要がある場合、または CDN が失敗した場合はローカル サーバーからダウンロードする必要がある場合に注意しています。ちなみに、私scriptjsはCDNから非同期にロードしていました。私が書いているコードは次のようなものです:

このコードも美しく機能します。

ここで、最初に CDN からロードしようとする多くの依存関係 (ハンドルバー、Ember など) があることは明らかであるため、このコードは少し冗長になり始めます。そのため、私がしようとする最も論理的なことは関数にリファクタリングします。

問題は、ステートメント内の式を処理するときにWebpack に特定の 動作requireがあることです。これにより、上記の方法でモジュールをロードしようとする試みが妨げられます。特に、その中で式を使用するrequire場合

式で可能なすべてのファイルを含めようとします

上記のコードで Webpack を実行しようとすると、正味の効果として大量のエラー メッセージが表示されます。

リンクされたリソースは、含めるJavaScriptファイルのパスを明示的に宣言することを提案していますが、正確なパスを渡すことができない、または渡したくない場合に同じことを行う方法がわかりませんrequireが、代わりに示されているように、自動的に解決されたモジュール。

皆さんありがとう

編集:

式を使用してこれらのスクリプトをロードする方法はまだわかりませんが、回避策を設計しました。基本的にはrequire('script')、コールバック関数内に を明示的に記述し、必要なときにその関数を動的に呼び出すという考え方です。より正確には、次のような構成ファイルを用意しました。

次に、メイン コード内で、ロードするリソースの配列を次のように定義します。

そして、開発バージョンまたは配布バージョンをロードする必要がある場合は、動的に次のように呼び出します。

これが実際に行われている、より完全な例を次に示します

0 投票する
2 に答える
9988 参照

commonjs - Webpack と 6to5 を介して es6 モジュールで npm パッケージを使用する方法は?

自分のプロジェクト (または任意の npm パッケージ) で Immutable を使用したいとしましょう。npm install編集したので、 にありますnode_modules。もちろん、そこには CommonJS エクスポートがあります。ただし、プロジェクトで es6 モジュールを使用したいと考えています。

私は Webpack を使用してすべてをまとめてコンパイルし、6to5-loader を使用して es6 モジュール構文を処理しています。

私のソースファイルではimport Immutable from 'immutable';--- と言いますが、es6はエクスポートさimportれた es6 を探しているため、これは問題を引き起こしdefaultます (不変またはおそらく他のほとんどの npm パッケージの場合)。コンパイルされたコードは次のようになります。 ---見つけるプロパティvar Immutable = require('immutable')["default"];がないため、もちろんエラーになります。default

es6 モジュールで npm パッケージを使用できますか?