Webpack webpackChunkName magic comment does not work

Question

I am trying to use react loadable and dynamic import to split code to multiple bundles. The split process works very well. However, when I try to use the magic comment webpackChunkName to let Webpack customize the bundle names, it always name my bundles like 0.bundle.js 1.bundle.js ....

I used chunkFilename: '[name].bundle.js' in my webpack.config.js and also explicitly put "comments: true" in my .babelrc

After a whole day's research, I really feel frustrated. Really appreciate if someone has a clue.

Here is my configuration

webpack.config.js

entry: [ 'react-hot-loader/patch', './app/index.js' ], output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js', chunkFilename: '[name].bundle.js', publicPath: '/' },

.babelrc

 { "presets": [ ["env", {"modules": false}], "react" ], "plugins": ["transform-class-properties", "transform-object-rest-spread", "react-hot-loader/babel", "syntax-dynamic-import", "dynamic-import-webpack"], "env": { "test": { "presets": [ "env", "react" ], "plugins": ["transform-class-properties", "transform-object-rest-spread", "dynamic-import-webpack"] } }, "comments": true }

Router file

const Login = Loadable({ loader: () => import(/* webpackChunkName: 'LoginContainer' */ './containers/LoginContainer'), loading: LoadingAnimation, });

The building result:

Am I missing anything here?

If I use const Login = r => require.ensure([], () => r(require('./containers/LoginContainer')), 'LoginContainer'); It will work appropriately. Not sure whether I drop the comments somewhere. — Kevin
– Kevin, Commented Feb 21, 2018 at 1:30

Kevin · Accepted Answer · 2018-07-05 01:26:30Z

Update: The library's author gave a lot of support for looking for the solution. It turns out I used both dynamic-import-webpack and react-imported-component/babel in the .babelrc. After removed dynamic-import-webpack, it works very well with import()

Please try the method above first. Found the solution. I used the import() in my router, which does not work with webpackChunkname comment. After I changed it to System.import(), the comment can be used by Webpack.

Hopefully, other people who have the same issue can see this.

Thanks, it helped! Also for the others who use eslint, remember to put "System": true inside the field globals (in .eslintrc) to avoid undef errors

Cholan Madala · Accepted Answer · 2023-11-30 10:50:58Z

1

adding this part in my config file has fixed my issue:

chunkFilename: '[name].bundle.js',

answered Nov 30, 2023 at 10:50

Cholan Madala

3551 gold badge3 silver badges10 bronze badges

1 Comment

Dominik Peters Over a year ago

In particular, this goes into the output part of the webpack.config.js.

Collectives™ on Stack Overflow

Webpack webpackChunkName magic comment does not work

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related