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

Question

I have following project structure:

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

Library files use requirejs define([], function() {}) syntax.

I've therefore put this into the webpack.config.js:

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

I then do this in mainFile.js which is entry point for webpack:

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

And I get this error:

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.

So webpack tries to load some 0.js file. What's that supposed to be?

Answer 1

I have figured out a fix, I hope it helps.

For my React Routes, I'm using dynamic loading with import statements, without the CommonChunks plugin.

I was getting the same error (or "Chunk 1", "Chunk 2", etc) depending on the route I was loading. I finally realized that my asset bundles were actually being outputted into the current directory that my html was in, even though my output.path was pointing to the assets folder.

To fix this, I just set my output.chunkFilename to '../../../assets/js/com/[name].bundle.js', which then output it to the correct folder.

From then on, my app was able to find my bundles and it worked great!

Hope it helps, Michael

Answer 2

The AMD require loads the modules asynchronously and works like require.ensure . Webpack will split out these dynamic imports and request them when they are used. If you don't give them a name they will be numbered ( 0.js etc. or what you configured in output.chunkFilename ).

In case you don't need to split the code, you import them regularly and ES modules are recommended.

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

For more information on code splitting see Guides - Code Splitting and the recommended import() function.