フロントエンドのモジュラー開発を始めたばかりです。Webpack を学ぶためにデモを書きました。構成ファイルと操作プロセスは基本的に理解していますが、オンデマンドの読み込みは常に失敗します。助けてください:
エントリ ファイルでは、ロードするために 3 つのメソッドが使用されます:
リーリーtest.js の内容は非常に単純で、コンソールに出力するだけです:
リーリー 3 つのメソッドはすべてテストされています。最初の直接インポート メソッドのみが正常に実行されます。他の 2 つのオンデマンド読み込みメソッドは、メソッドが見つからないことを示すエラーを報告します。 test.exe('Display test text');
がコメントアウトされ、ロードされるだけで実行されない場合、エラーは報告されません。
コードのロードには何も問題はないと理解していますが、コードをロードする必要があるときに正常にロードされません。これはなぜですか?どこかに間違ったことを書いたでしょうか?それとも webpack.config.jx に追加の設定を行う必要がありますか?
参考までに例を示します
html
リーリー非同期でロードする必要があるjsファイルplugin.js
リーリーwebpackのエントリーコンパイルファイルentry.js
リーリーその効果は、クリックするとmod1.jsがロードされて先頭に挿入されますが、最初はロードされていません
最後に、webpack.config.jsの設定についてです。
リーリー最近同様の問題に遭遇したので、簡単に説明させてください。
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
が使用できるようになります。