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

Question

我有以下項目結構：

|-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:
onScriptComplete@http://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文件。 應該是什么？

Answer 1

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

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

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

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

從那時起，我的應用程序能夠找到我的捆綁，它工作得很好！

希望它有所幫助，邁克爾

Answer 2

AMD require異步加載模塊並且像require.ensure一樣require.ensure 。 Webpack將拆分這些動態導入並在使用它們時請求它們。 如果你沒有給他們一個名字，他們將被編號（ 0.js等或你在output.chunkFilename配置的）。

如果您不需要拆分代碼，可以定期導入它們，建議使用ES模塊 。

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

有關代碼拆分的更多信息，請參閱指南 - 代碼拆分和推薦的import()函數。