Webpack webpackChunkName魔术注释不起作用

凯文

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

我用chunkFilename: '[name].bundle.js'我的webpack.config.js,也明确提出“ comments: true”在我的.babelrc

经过一整天的研究,我感到非常沮丧。如果有人有线索,请多谢。

这是我的配置

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,
});

建筑结果:

在此处输入图片说明

我在这里想念什么吗?

凯文

更新:图书馆的作者为寻找解决方案提供了很多支持。事实证明,我在.babelrc中同时使用了dynamic-import-webpack和react-imported-component / babel。删除dynamic-import-webpack之后,它可以与import()一起很好地工作


请首先尝试上述方法。找到了解决方案。我在路由器中使用了import(),它与webpackChunkname注释不兼容。将其更改为System.import()之后,Webpack可以使用该注释。

希望其他有相同问题的人也可以看到此信息。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章