错误：加载块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

回答

相关问题