我正在尝试使用反应可加载和动态导入将代码拆分为多个捆绑包。拆分过程非常有效。但是,当我尝试使用魔术注释webpackChunkName
让 Webpack 自定义包名称时,它总是将我的包命名为 0.bundle.js 1.bundle.js ....
我在我的 .babelrc 中使用chunkFilename: '[name].bundle.js'
过webpack.config.js
并且还明确地将“ ”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,
});
构建结果:
我在这里错过了什么吗?