如何为 create-react-app 创建多个条目和输出并将它们分开？

Question

我的用例是我正在使用 electron 并希望有多个 windows 可以加载。最初会加载一个节点应用程序，但不会向用户显示。我只是将它用于运行特定任务。另一个 window 将是 UI 客户端，这将在 React 中构建。我正在使用 create-react-app。

我走过的步数

我已经弹出了。
我创建了多个入口点。

基本都关注了讨论here

我目前面临的问题是 webpack 正在将我的第二个捆绑文件插入原始 index.html

我希望两个包保持完全独立，因为次要包将由电子启动。

我需要在我的 webpack 配置中修改什么来保持 bundle 完全独立？

进行了修改

webpack.config.dev.js

条目：

entry: {
  app: [
    require.resolve('./polyfills'),
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
  ],
  secondary: [
    require.resolve('./polyfills'),
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.secondaryIndexJs,
  ]
},


output: {
  pathinfo: true,
  filename: 'static/js/[name].bundle.js',
  chunkFilename: 'static/js/[name].chunk.js',
  publicPath: publicPath,
  devtoolModuleFilenameTemplate: info =>
  path.resolve(info.absoluteResourcePath).replace(/\/g, '/'),
},

附加 HtmlWebpackPlugin 插件

new HtmlWebpackPlugin({
  inject: true,
  chunks: ["secondary"],
  template: paths.secondaryHtml,
  filename: 'secondary.html',
}),

paths.js

相应修改

Answer 1

解决办法就是在原来的HtmlWebpackPlugin属性的基础上加上 excludeChunks: ["secondary"],.

总的来说：

 new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
  excludeChunks: ["secondary"]
}),
new HtmlWebpackPlugin({
  inject: true,
  chunks: ["secondary"],
  template: paths.secondaryHtml,
  filename: 'secondary.html',
}),

如何为 create-react-app 创建多个条目和输出并将它们分开？

How to create multiple entries and output for create-react-app and keep them separated?

javascript

reactjs

webpack

electron

create-react-app

进行了修改

总的来说：