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插件。

我得到了同样的错误（或＃34; Chunk 1＆＃34;，＆＃34; Chunk 2＆＃34;等等），具体取决于我加载的路线。我终于意识到我的资产包实际上被输出到我的html所在的当前目录中，即使我的output.path指向assets文件夹。

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

从那时起，我的应用程序能够找到我的捆绑包并且效果很好！

希望它有所帮助，迈克尔

Answer 2

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

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

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

有关代码拆分的详细信息，请参阅Guides - Code Splitting和推荐的import()功能。

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

2 个答案: