向webpack配置添加额外入口点的问题（创建反应应用程序）

Question

我正在使用弹出的create react app项目处理chrome扩展。我需要两个单独的JavaScript文件。一个用于弹出页面，另一个用于后台脚本。弹出页面是反应项目，后台脚本在后台运行。

当我使用命令npm build

构建项目时

它为我提供了以下构建文件夹：

输入和输出文件分别以黄色和红色突出显示。

但我有以下问题：

1. 从不编译background.js入口点。 Webpack给出了我在输入文件中写的输出
2. 在background.js文件中编写es6代码会给我编译问题（＆＃34;未能缩小＆＃34;）

我尝试通过修改config文件夹中的paths.js文件来解决此问题：

然后在webpack.config.prod.js文件中添加一个额外的入口点。

Answer 1

您放在public文件夹中的所有内容都会被复制到您可以看到的构建文件夹中。仅处理src内的文件。您想要的是将background.js放在src文件夹中。使用正确的路径修改appBackgroundJs，然后在webpack配置中修改，而不是

entry: [require.resolve(polyfills), appIndexJs, appBackgroundJS]

使用

entry: {
  main: [require.resolve('./polyfills'), paths.appIndexJS],
  background: paths.appBackgroundJS,
},