从 react-loadable 命名 webpack 块答案

【问题标题】：Name webpack chunks from react-loadable从 react-loadable 命名 webpack 块
【发布时间】：2018-03-17 00:08:06
【问题描述】：

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

我的 react-loadable 代码是

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

我添加了注释告诉 webpack 3 我希望这个块被命名为 app.我是不是做错了什么？

【问题讨论】：

标签： reactjs webpack dynamic-import react-loadable

【解决方案1】：

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

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

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

编辑：

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

【讨论】：