2017-07-30 7 views
2

をロードしようとします:エラー:チャンク0のロードに失敗しました。 - WebPACKのは、私がプロジェクト構造次いる0.js

|-mainFile.js 
|-scripts - 
      |-Library1.js 
      |-Library2.js 

ライブラリファイルがrequirejsにdefine([], function() {})構文を使用します。

は、従って私はwebpack.config.jsにこれを入れている:私は、その後mainFile.jsでこれを行う

module.exports = { 
    resolve: { 
     modules: [ 
      path.resolve(__dirname, 'scripts'), 
      // The normal path 
      "node_modules" 
     ] 
    }, 
    /** ... **/ 
} 

WebPACKのためのエントリポイントです:私はこのエラーを

require(["Library1", "Library2"], function(Library1, Library2) { ... }); 

とGET :

GET http://localhost:3000/0.js [HTTP/1.1 404 Not Found 3ms] 
Error: Loading chunk 0 failed. 
Stack trace: 
[email protected]://localhost:3000/player/webpack_build.js:100:24 
        webpack_build.js:146:52 
The resource from “http://localhost:3000/0.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).[Learn More] 
test_file.html Error: Loading chunk 0 failed. 

したがって、webpackは0.jsファイルをロードしようとします。それは何であるはずですか?

答えて

0

AMD requireはモジュールを非同期にロードし、require.ensureのように機能します。 Webpackはこれらの動的インポートを分割し、使用時にそれらを要求します。名前を付けないと番号が付けられます(0.jsなど、output.chunkFilenameで設定したもの)。

コードを分割する必要がない場合は、定期的にコードをインポートし、ES modulesをお勧めします。コード分​​割の詳細については

import Library1 from "Library1" 
import Library2 from "Library2" 

Guides - Code Splittingと推奨import()関数を参照してください。

+0

、それがお役に立てば幸いです。それは不可能ですか? –

+0

webpackを使用してモジュールフォーマットを使用することもできます(それらを混在させることもできます)。 importだけがコードの分割を行いますので、あなたのコードで 'import'を使うことで問題ありません。サードパーティのコードの中には、何かを動的にインポートするものがある場合、それらをwebpackにバンドルする場合は、チャンクをロード/ロードする必要があります。 –

+0

しかしrequirejsで動作する通常のrequirejsコードを使用しています。しかし、私がwebpackを実行すると、問題に記載されているようにエラーが表示されます。では、何が問題を引き起こすのでしょうか?私はまだ理解していません。 –

0

修正を見つけたので、助けてください。

私のReact Routesでは、CommonChunksプラグインを使用せずにimport文で動的ロードを使用しています。

私がロードしていたルートによって、同じエラー(「チャンク1」、「チャンク2」など)が発生しました。私は最終的に、私のoutput.pathがassetsフォルダを指していたとしても、自分の資産バンドルが実際に自分のhtmlが入っていたカレントディレクトリに出力されていることに気付きました。

これを修正するために、output.chunkFilenameを '../../../assets/js/com/[name].bundle.js'に設定してから、正しいフォルダに出力しました。

その後、私のアプリケーションは私のバンドルを見つけることができたし、それは素晴らしい仕事をした!

は、私はプロジェクトがrequirejs` `と互換性がある必要があり マイケル

関連する問題