我尝试使用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,
});
生成结果:
我错过什么了吗?
1条答案
按热度按时间velaa5lx1#
更新:库的作者为寻找解决方案提供了很多支持。结果我在. babelrc中使用了dynamic-import-webpack和react-import-component/babel。删除dynamic-import-webpack后,它与import()配合得非常好
请先尝试上面的方法。找到了解决方案。我在路由器中使用了import(),它不适用于webpackChunkname注解。在**我将其改为System.import()**后,注解可以被Webpack使用。
希望其他有同样问题的人能看到这一点。