错误：加载块 0 失败。 - webpack 尝试加载 0.js答案

【问题标题】：Error: Loading chunk 0 failed. - webpack tries to load 0.js错误：加载块 0 失败。 - webpack 尝试加载 0.js
【发布时间】：2018-01-06 03:30:16
【问题描述】：

我有以下项目结构：

|-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 文件。那应该是什么？

【问题讨论】：

标签： javascript node.js webpack

【解决方案1】：

我已经找到了解决方法，希望对您有所帮助。

对于我的 React 路由，我使用带有 import 语句的动态加载，没有 CommonChunks 插件。

根据我加载的路线，我遇到了相同的错误（或“Chunk 1”、“Chunk 2”等）。我终于意识到我的资产包实际上被输出到我的 html 所在的当前目录中，即使我的 output.path 指向资产文件夹。

要解决此问题，我只需将 output.chunkFilename 设置为 '../../../assets/js/com/[name].bundle.js'，然后将其输出到正确的文件夹。

从那时起，我的应用就能找到我的捆绑包，而且效果很好！

希望对你有帮助，迈克尔

【讨论】：

【解决方案2】：

AMD require 异步加载模块，工作方式类似于require.ensure。 Webpack 会拆分这些动态导入，并在使用时请求它们。如果您不给它们命名，它们将被编号（0.js 等或您在 output.chunkFilename 中配置的内容）。

如果您不需要拆分代码，请定期导入，推荐ES modules。

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

有关代码拆分的更多信息，请参阅Guides - Code Splitting 和推荐的import() 函数。

【讨论】：

我需要项目兼容requirejs。这不可能吗？
您可以使用 webpack 使用任何模块格式（甚至可以混合使用它们）。只有导入会进行代码拆分，因此您可以在代码中使用import。如果某些第三方代码动态导入某些内容，如果您想将它们与 webpack 捆绑在一起，则必须提供/加载这些块。
但我使用的是与 requirejs 一起使用的普通 requirejs 代码。但是当我运行 webpack 时，会出现错误，如问题所述。那么导致问题的原因是什么？我还是不明白。
require([], function() {}) 用于Lazy Loading，如果使用它，则需要加载创建的块（包）。 Webpack 理解define([], function() {})，你可以像使用任何其他模块一样使用它，你不需要使用require([], function() {})（它会执行代码拆分）。
好的，那么我应该调用什么来导入代码，以便 requirejs 和 webpack 都可以工作？