Webpack webpackChunkName 魔术注释不起作用

Question

我正在尝试使用 React 可加载和动态导入将代码拆分为多个包。拆分过程非常有效。但是，当我尝试使用魔术注释 webpackChunkName 让 Webpack 自定义包名称时，它总是将我的包命名为 0.bundle.js 1.bundle.js ....

我在我的 webpack.config.js 中使用了 chunkFilename: '[name].bundle.js' 并且还在我的 .babelrc

中明确地放置了“comments: true”

经过一整天的研究，我真的很沮丧。如果有人有线索，我将不胜感激。

这是我的配置

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
}

路由器文件

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

搭建结果：

我在这里遗漏了什么吗？

Answer 1

更新：图书馆的作者为寻找解决方案提供了很多支持。结果我在 .babelrc 中同时使用了 dynamic-import-webpack 和 react-imported-component/babel。去掉dynamic-import-webpack后，配合import()

效果很好

请先尝试上面的方法。找到了解决方案。我在路由器中使用了 import() ，它不适用于 webpackChunkname 注释。 我改成System.import()后，注释可以被Webpack使用

希望有同样问题的朋友能看到。

Webpack webpackChunkName 魔术注释不起作用

Webpack webpackChunkName magic comment does not work

reactjs

webpack

babeljs

code-splitting

react-loadable