参考までに例を示します

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/」に変更し、インデックス フォルダーの外に移動して、この非同期パスを見つける必要があります。モジュール

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

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

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

あなたの具体的な環境はわかりません。私自身の環境は 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 が使用できるようになります。