编程语言
首页 > 编程语言> > javascript – 如何为create-react-app创建多个条目和输出并保持它们分开?

javascript – 如何为create-react-app创建多个条目和输出并保持它们分开?

作者:互联网

我的用例是我正在使用电子,并希望有多个可以加载的窗口.最初将加载一个节点应用程序,但不会向用户显示.我只是用它来运行特定的任务.另一个窗口将是UI客户端,这将建立在反应中.我正在使用create-react-app.

我采取的步骤

>我已经退出了.
>我创建了多个入口点.

基本上,我已经跟随讨论here

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

我希望两个束保持完全分离,因为辅助束将由电子启动.

我需要在我的webpack配置中修改什么才能使捆绑包完全分开?

修改

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

>据此修改

解决方法:

解决方案是简单地将excludeChunks:[“secondary”]添加到原始的HtmlWebpackPlugin属性中.

总体而言:

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

标签:javascript,webpack,reactjs,electron,create-react-app
来源: https://codeday.me/bug/20190705/1388966.html