Babel.js Webpack webpackChunkName魔术注解不起作用

nnsrf1az  于 2022-12-08  发布在  Babel
关注(0)|答案(1)|浏览(370)

我尝试使用react loadable和dynamic import将代码拆分成多个包。拆分过程非常顺利。但是,当我尝试使用神奇的注解webpackChunkName让Webpack自定义包名时,它总是将我的包命名为0.bundle.js 1.bundle.js ...。
我在我的webpack.config.js中使用了chunkFilename: '[name].bundle.js',并且在我的.babelrc中显式地放置了“comments: true“。
经过一整天的研究,我真的感到很沮丧。真的很感激如果有人有线索。
这是我的配置

网页包.配置.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,
});

生成结果:

我错过什么了吗?

velaa5lx

velaa5lx1#

更新:库的作者为寻找解决方案提供了很多支持。结果我在. babelrc中使用了dynamic-import-webpack和react-import-component/babel。删除dynamic-import-webpack后,它与import()配合得非常好

请先尝试上面的方法。找到了解决方案。我在路由器中使用了import(),它不适用于webpackChunkname注解。在**我将其改为System.import()**后,注解可以被Webpack使用。
希望其他有同样问题的人能看到这一点。

相关问题