問題タブ [webpack-4]

以下を使用して、.json ファイルから .tsx にデータをインポートしようとしています。

しかし、私はエラーが発生しました

モジュール「data/mockup.json」が見つかりません

私のwebpack設定は次のようになります：

.json はデフォルトで webpack4 に組み込まれていると思うので、webpack の設定に何か問題があるのでしょうか?

使用したバージョン: webpack: v4.4.1 typescript: 2.7.2

Webpack 3 から 4 にアップグレードしようとしていますが、共有バンドルの閉鎖に問題があります。

私の webpack は、 と の間でshared.jsコードを共有するファイルを作成するように設定されています。特に、バンドルには、変数を含むインデックス ファイルがあります。を返すという関数だけをエクスポートします。この呼び出しは、ファイル内のさまざまな場所で発生します。a.jsb.jsshared.jsstoregetStore()storegetStorea.jsb.js

私たちのページのスクリプトのラインナップは次のようになります。

Webpack 3 では、(呼び出し元の)getStore()コードを初めて呼び出すと、そのインスタンスが作成され、その呼び出しから呼び出しが返されます。以降のfromの呼び出しでは、 のインスタンスを作成するのではなく、 から同じ値を返します。次に、が完了して実行された後、 を呼び出すと、インスタンス化されず、使用したのと同じインスタンスが使用されます。この場合、 は同じインスタンスで、 と.shared.jsa.jsstorestoregetStore()getStore()a.jsstoregetStore()a.jsb.jsb.jsgetStore()storea.jsstorea.jsb.js

ただし、Webpack 4 では動作が異なります。a.jsのコードを呼び出すとshared.js、コードが最初に を参照するときに、以前getStore()と同様に、 の新しいインスタンスが作成され、実行中および呼び出しstore中に同じインスタンスが返されます。ただし、がコードを最初に参照するとき、使用したのと同じインスタンスを使用するのではなく、 の新しいインスタンスを作成し、のスクリプト実行全体を通じて、を呼び出すときにその秒を参照します。この場合、 の 2 つのインスタンスがあり、それぞれがとに固有です。a.jsgetStore()b.jsshared.jsa.jsstoreb.jsstoregetStore()storea.jsb.js

この問題の原因となっている Webpack 4 の違いはわかりません。CommonChunksPluginWebpack 3の の使用から切り替え、組み込みの最適化設定を使用するようになりました。以下は、両方の構成方法です。

ウェブパック 3:

ウェブパック 4:

どちらの Webpack 構成もほぼ同じサイズのファイルを吐き出し、デバッグしてコール スタックを確認するとgetStore()、それぞれの a/b.js ファイルからの呼び出しが発生します。

Webpack 4 でオブジェクトの個別のインスタンスを取得する理由a.jsと、Webpack 3 と同じインスタンスを取得する理由についての説明はありますか? スクリプトが相互に依存している場合、それらのクロージャー/スコープは共有コードをどのように処理することになっていますか?b.jsshared.js store