javascript - webpack2 のオンデマンド読み込みが有効にならないのはなぜですか?

Question

フロントエンドのモジュラー開発を始めたばかりです。Webpack を学ぶためにデモを書きました。構成ファイルと操作プロセスは基本的に理解していますが、オンデマンドの読み込みは常に失敗します。助けてください:

エントリ ファイルでは、ロードするために 3 つのメソッドが使用されます:

リーリー

test.js の内容は非常に単純で、コンソールに出力するだけです:

リーリー

3 つのメソッドはすべてテストされています。最初の直接インポート メソッドのみが正常に実行されます。他の 2 つのオンデマンド読み込みメソッドは、メソッドが見つからないことを示すエラーを報告します。
test.exe('Display test text'); がコメントアウトされ、ロードされるだけで実行されない場合、エラーは報告されません。
コードのロードには何も問題はないと理解していますが、コードをロードする必要があるときに正常にロードされません。これはなぜですか?どこかに間違ったことを書いたでしょうか？それとも webpack.config.jx に追加の設定を行う必要がありますか?

Answer 1

参考までに例を示します

html

リーリー

非同期でロードする必要があるjsファイルplugin.js

リーリー

webpackのエントリーコンパイルファイルentry.js

リーリー

その効果は、クリックするとmod1.jsがロードされて先頭に挿入されますが、最初はロードされていません

最後に、webpack.config.jsの設定についてです。

リーリー

path + chunkFilename は require.ensurei 非同期モジュールによって生成されたパスですが、これは HTML ファイルが参照するパスではありません

実際の参照パスは publicPath + chunkFilename です。つまり、html がプロジェクトのルート ディレクトリにある場合、この非同期 js モジュールを参照する html のパスは ./dist/js/async/[name].js です。ただし、index/index.html などのフォルダー内の html または上記のパスを参照できない場合は、publickPath を「../dist/」に変更し、インデックス フォルダーの外に移動して、この非同期パスを見つける必要があります。モジュール

Answer 2

最近同様の問題に遭遇したので、簡単に説明させてください。
webpack が 2 にアップグレードされると、2 番目と 3 番目のクレジット メソッドは main.js に直接パッケージ化されません。
つまり、最初の画面の読み込みに必要なモジュールの場合、非同期読み込みモードは使用できなくなりましたが、オンデマンドで読み込むことができます。
最初のメソッドを除いて、テスト メソッドは js にパッケージ化されていません。

Answer 3

2番目と3番目の書き方はどうしたいですか？ AMDまたはCMD仕様の記述方法をシミュレートしたいですか?

最も一般的なモジュール仕様は、ES6 モジュールと、node.js の commonJS 仕様です。これは、ロード時間やファイルの参照方法の違いなど、特定のロードの詳細に違いがあるためです。しかし、webpack を使用する目的は、Webpack がコンパイルされた後に ES6 モジュールと CommonJS の仕様に差異がないよう、事前にすべてのモジュールをまとめてパッケージ化し、それぞれに ID を付与し、ID で参照することです。 AMD および CMD の仕様についても同様です。
投稿者が Webpack を使用して CMD の遅延読み込みを実装したい場合、この考えは間違っています。なぜなら、どの読み込み方法であっても、Webpack が行うことは、依存する (または依存する) すべてのモジュールを 1 つのファイルにパッケージ化することだからです。実行時に対応するパッケージをIDで検索できるため、仕様間の差異が軽減されます

Answer 4

あなたの具体的な環境はわかりません。私自身の環境は Webpack2 + React Router v4 にアップグレードされています。ドキュメントを参照してください: https://reacttraining.cn/web/...

まず、バンドル コンポーネントをコーディングして作成し、必要なモジュールとコンポーネント ファイルをオンデマンドでロードする必要があります。

リーリー

上記のコードはドキュメントからコピーされ、状態の初期化メソッドが変更されている場合は、babel-plugin-transform-class-properties.

を使用する必要があります。

使用するには3つのステップがあります

• Bundleモジュールをインポート

リーリー

• 非同期読み込み

リーリー

• 初期化

リーリー

もちろん、.babelrc 和 webpack.config.jsを設定する必要があります。以下に私のものを示しますので、勉強してください。

webpack.config.js

リーリー

.babelrc

リーリー

パブリックブロック出力プラグインの設定もあります

リーリー

上記の N ステップを通過すると、コンポーネント Home が使用できるようになります。