問題タブ [webpack-2]

複数のルートを持つ単一ページ アプリを開発しており、それらのルートのごく一部がウィジェットを画面に描画します。各ルートには、コンテンツの描画を担当する遅延ロードされた React コンポーネントがあります。

私が使用しているウィジェット npm パッケージはかなり大きいので、メイン アプリケーションにバンドルしたくありませんが、それを必要とするルートのすべての動的バンドルにも含めたくありません。

この目的のために、Webpack 1.x では、ルートに対して次のことができました。

これにより、3 つの webpack バンドル ファイルが適切に生成されます。

• nameOfWidgetPackageBundle.js
• nameOfRouteBundleA.js
• nameOfRouteBundleB.js

そして、アプリで /route/A を押すと、nameOfWidgetPackageBundle.js と nameOfRouteBundleA.js の 2 つの js ファイルが順番に読み込まれます。

その後、/routeB に移動すると、nameOfWidgetPackageBundle.js と nameOfRouteBundleA.js の 2 つの js ファイルが順番にロードされますが、重要なことに、nameOfWidgetPackageBundle.js はブラウザーのキャッシュから取得されます...

Webpack 2.x 構文に変更した後、ルートは次のようになりました。

これにより、いくつかのchunkFilesが生成されます（厄介なことに、Webpack 2のSystem.importではチャンクファイルに名前を付けることができなくなりましたが、例のためにWebpack 1のrequire.ensureと同じバンドル命名スタイルを使用します）：

• nameOfWidgetPackageBundleA.js
• nameOfWidgetPackageBundleB.js
• nameOfRouteBundleA.js
• nameOfRouteBundleB.js

そのため、基本的に、ウィジェット パッケージ用に重複したバンドルが作成されます。2 つのファイルのファイル サイズは同じで、内容もほぼ同じですが、異なるルート間を移動するには、使用するたびにウィジェット パッケージを再ダウンロードする必要があります。

ここでの私の質問は、Webpack 2 System.import を強制的に Webpack 1 の require.ensure のように動作させ、重複したバンドルを生成しないようにする方法を知っている人はいますか?

編集-問題を解決するために、次のwebpackプラグインを使用してみました:

new CommonsChunkPlugin({ name: 'widget-package', async: true, children: true, minChunks: 1}) (widget-package をエントリとして追加)

new DedupePlugin()

新しい webpack.optimize.AggressiveMergingPlugin({ minSizeReduce: 1.5, moveToParents: false, entryChunkMultiplicator: 10 })

これらのうち、効果があったのは AggressiveMergingPlugin だけでした。重複するウィジェットパッケージバンドルの問題を解決しましたが、動的バンドルが1つしかないため、すべての動的バンドルをマージして目的全体を無効にしました...

解決できない奇妙な問題があります。

このエラーが発生しています：

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

ファイルは確かにそのフォルダーに存在します。webpackでうまくいきました。ただし、webpack2 では動作しないようです。

私は Webpack 2 をいじり、TypeScript を ES6 モードに切り替えて、ツリー シェーキングを利用しています。それはすべてクールですが、問題は、すべてのブラウザーがまだそれをサポートしているわけではないにもかかわらず、現在、本番環境で ES6 を使用していることです。

ツリーシェイクが完了した後にWebpack に ES5 を発行するように指示するにはどうすればよいですか?

angular/universal-starter の縮小を有効にする方法は?

現在、ブラウザは 3.4MB のindex.jsファイルを読み込みます。

enableProdModeミニフィケーションの責任はありますか？

はいの場合、universal-starter はenableProdModeserver.tsとclient.tsに含まれています。

そうでない場合、縮小を有効にする方法は? ありがとう

この問題が発生しています。リポジトリにプッシュするまでプロジェクトは良好ですが、別のディレクトリまたは他のマシンのリポジトリからクローンを作成すると、自分のマシンで動作しているプロジェクトが動作しません。

npm cache cleannode_modules を完全に削除してこの問題を修正しようとしましたが、依存関係を再インストールしましたが、うまくいきませんでした

実行環境:
Webpack バージョン: 2.1.0-beta.25
環境: OS X 10.11.6
ノード v6.2.0、npm 3.8.9

npm デバッグ ファイル:

webpackでDLLを遅延ロードする方法はありますか?

次の例を見てきました: https://gist.github.com/robertknight/058a194f45e77ff95fcd

この例では、バンドルを として分離してDLLいますが、script タグを介して含めています。

DLL代わりに別のバンドルから条件付きで含めるよう Webpack に指示する方法はありますか?

アイデアは、ユーザー固有のランタイム条件が true の場合にのみバンドルが読み込まれる遅延読み込み手法として使用することです。

文脈のために、私はAngular 2でこれをやっています

webpackで圧縮/コンパイルするangular2プロジェクトがあります。

私は webpack で tslink ローダーを使用しているので、tslint 関連の構成をwebpack.config.js.

webpack 1.13.1 を 2.1.0-beta.25 に更新したところ、tslint 構成によって複雑なnpm run build.

preLoadersディレクティブを次のように変更しましたloaders

それでもエラーが発生するので十分ではありません

そのため、tslint 構成を移動して別の場所に配置する必要があります。ここでちょっと迷った。そのため、この問題に関する情報は大歓迎です。

ありがとう！

webpack 2 の新機能では、エクスポート名について次のように述べています。

ES6エクスポートマングリング

エクスポートの使用状況を追跡できる場合、webpack はエクスポート名を単一の char プロパティにマングルできます。

私は webpack を試していて、http: //webpack.github.io/docs/usage.html にある非常に単純な「猫」の例から始めました。

js ファイルを ts に変換し、sourceMaps を有効にしようとしました。app.ts にブレークポイントを設定しても

その後、Chrome は正しい場所で停止しますが、コンソールで "cats" を評価できません (Uncaught reference error: cats is not defined)。生成された JS を調べると、「ra」を使用して猫を印刷する必要があることがわかりました。

だから：その原因はこの「輸出マングリング」であると私は正しいですか？

オフにできますか？

私は Webpack 2 を使用しています。このプロジェクト用のカスタム ローダーを作成し、./webpack-tools/loaders/my-custom-loader.js. ローダーは次のようになります。

webpack.config.jsonこのカスタムローダーを使用するように構成しようとしました:

プロジェクトをビルドしようとすると、次のエラーが表示されます (プロジェクトに関する識別情報を削除するためにスクラブされます)。

(このエラー メッセージは非常に役に立たないことを認めなければなりません。「SyntaxError: Unexpected token ILLEGAL」というメッセージでは、何が問題なのか手がかりが得られず、カスタム ローダーは完全なトレースのどこにも表示されません..)

でカスタム ローダーを参照する方法をいくつか試しましたwebpack.config.js。

と：

しかし、使用する構成に関係なく、同じエラーが発生します。

Webpack 2 プロジェクトにカスタム ローダーを正しく含めるにはどうすればよいですか?

angular2 with webpack2 プロジェクトを angular-cli ベースのプロジェクトに変換しようとしています。

私の理解が正しければ、angular-cli は webpack をサポートするようになりました。私の元のプロジェクトでは、次を注入しましたapp.config.js。

以下をwebpack.config.js ファイルに追加します。

次に、typescript プロジェクトで APP_CONFIG を宣言しdeclare var APP_CONFIG:any;、そのプロパティを使用します。angular-cli プロジェクトにそのようなオブジェクトを挿入するにはどうすればよいですか?

ありがとう