Search code examples
reactjswebpackbabeljscode-splittingreact-loadable

Webpack webpackChunkName magic comment does not work

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:

enter image description here

Am I missing anything here?

Solution

  • 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.