錯誤：加載塊0失敗。 - 的WebPack嘗試加載0.js

我有以下項目結構：錯誤：加載塊0失敗。 - 的WebPack嘗試加載0.js

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

庫文件使用requirejs define([], function() {})語法。

我因此投入webpack.config.js這樣的：

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

那麼我這樣做是mainFile.js這是的WebPack切入點：

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

而且我得到這個錯誤：

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文件。那應該是什麼？

來源

2017-07-30 Tomáš Zato

AMD require異步加載模塊，其工作原理與require.ensure類似。 Webpack將拆分這些動態導入並在使用時請求它們。如果你不給他們一個名字，他們將被編號（0.js等或你在output.chunkFilename配置的內容）。

如果您不需要拆分代碼，請定期導入它們，建議使用ES modules。

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

有關代碼分裂的更多信息請參見Guides - Code Splitting和推薦import()功能。

來源

2017-07-30 15:52:16

我需要的項目與'requirejs'兼容。這不可能嗎？ –

你可以使用任何模塊格式與webpack（甚至混合它們）。只有導入沒有代碼分割，所以你可以在你的代碼中使用'import'。如果某些第三方代碼動態地導入了某些內容，則如果要將它們與webpack捆綁在一起，則必須提供/加載塊。 –

但我正在使用與requirejs一起工作的正常requirejs代碼。但是，當我運行webpack時，出現錯誤，如問題所述。那麼是什麼導致了這個問題我還是不明白。 –

我已經想出了一個修復，我希望它有幫助。

對於我的React Routes，我使用動態加載進口語句，沒有CommonChunks插件。

我得到相同的錯誤（或「塊1」，「塊2」等），具體取決於我加載的路線。我終於意識到，即使我的output.path指向資產文件夾，我的資產捆綁包實際上已被輸出到我的html所在的當前目錄中。

要解決這個問題，我只需將我的output.chunkFilename設置爲'../../../assets/js/com/[name].bundle.js'，然後將其輸出到正確的文件夾。

從那時起，我的應用程序能夠找到我的軟件包，它運行得非常好！

希望它能幫助，邁克爾

來源

2018-02-13 22:38:27

錯誤：加載塊0失敗。 - 的WebPack嘗試加載0.js

回答

相關問題