微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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',
}),

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐