Как создать несколько записей и выходных данных для create-react-app и сохранить их разделенными?


Мой пример использования заключается в том, что я использую electron и хотел бы иметь несколько окон, которые могут быть загружены. Сначала будет загружено приложение узла, но оно не будет отображаться пользователю. Я просто использую его для выполнения конкретных задач. Другим окном будет клиент пользовательского интерфейса, и это будет встроено в react. Я использую create-react-app.

Шаги, которые я предпринял

  • я катапультировался.
  • я создал несколько точек входа.

В основном, я следовал Обсуждение здесь

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что webpack вставляет мой второй упакованный файл в исходный index.html

Я хотел бы, чтобы оба пучка оставались полностью разделенными, поскольку вторичный пучок будет инициирован электроном.

Что мне нужно изменить в конфигурации webpack, чтобы пакеты были полностью разделены?

Внесенные Изменения

веб-пакет.конфиг.разработка.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',
}),

тропинки.js

  • изменено соответствующим образом
1 2

1 ответ:

Решение состоит в том, чтобы просто добавить excludeChunks: ["secondary"], к исходному свойству HtmlWebpackPlugin.

В своей совокупности:

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