我正在尝试使用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] 删除。
我来说两句