reactjs - 从react-loadable中命名webpack block

Question

我已经成功在我的项目中添加了react-loadable库来启用代码分割，我发现的唯一问题是webpack生成的 block 没有命名，它们被赋予了整数名称。

我的 react 可加载使用代码是

const AppRootLoadable = Loadable({
  loader: () => import(/* webpackChunkName: "app" */ './App'),
  loading: () => null,
  render(loaded) {
    const Component = loaded.default;
    return <Component />;
  },
});

我添加了注释来告诉 webpack 3 我希望将此 block 命名为 app。我是不是做错了什么？

Answer 1

好的，四天后我找到了解决方案。我需要将 chunkFilename 行添加到我的 webpack 配置中:

output: {
  path: path.join(__dirname, './../public'),
  filename: 'bundle.js',
  publicPath: '/',
  chunkFilename: '[name].[chunkhash].js'
},

然后就可以了。我在webpack github page中找到了它

<小时/>

编辑:

有关替换的其他信息可以在 output.chunkFilename 的 webpack 文档中找到和 output.filename