带有过滤器的 Webpack Config 多个入口点错误

Question

我使用 create-react-app 创建了一个 React 应用程序并将其弹出以更好地控制构建过程并将其转变为浏览器扩展。

如果只有一个输入文件，我的构建可以正常工作，但现在我尝试创建 2 个额外文件（它们需要与主文件分开，因为它们将是背景文件），我在构建时遇到错误，不知道为什么会发生。我只需要 1 个带有 javascript (react) 的 html 页面的文件，另外 2 个我只需要扩展功能的 javascript 文件。

这是 Webpack 文件中的原始入口点：

entry: [
    // Include an alternative client for WebpackDevServer. A client's job is to
    // connect to WebpackDevServer by a socket and get notified about changes.
    // When you save a file, the client will either apply hot updates (in case
    // of CSS changes), or refresh the page (in case of JS changes). When you
    // make a syntax error, this client will display a syntax error overlay.
    // Note: instead of the default WebpackDevServer client, we use a custom one
    // to bring better experience for Create React App users. You can replace
    // the line below with these two lines if you prefer the stock client:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    isEnvDevelopment &&
        require.resolve("react-dev-utils/webpackHotDevClient"),
    // Finally, this is your app's code:
    paths.appIndexJs
    // We include the app code last so that if there is a runtime error during
    // initialization, it doesn't blow up the WebpackDevServer client, and
    // changing JS code would still trigger a refresh.
].filter(Boolean),

为了让系统可以输出单独的 javascript 文件，我添加了另外 2 个入口点，如下所示：

entry: {
    app: [
        isEnvDevelopment &&
            require.resolve("react-dev-utils/webpackHotDevClient"),
        paths.appIndexJs
    ].filter(Boolean),
    background: [
        isEnvDevelopment &&
            require.resolve("react-dev-utils/webpackHotDevClient"),
        paths.backgroundIndexJs
    ].filter(Boolean),
    content: [
        isEnvDevelopment &&
            require.resolve("react-dev-utils/webpackHotDevClient"),
        paths.contentIndexJs
    ].filter(Boolean)
},

appIndex-backgroundIndex，contentIndex都定义在路径文件中，指向有效目录。

当尝试在此运行 npm run build 时，我不断收到错误：

Cannot read property 'filter' of undefined

并且无法弄清楚这是怎么回事。

我不知道为什么这个入口点需要“.filter(Boolean)”或者我可以在哪里关闭它，所以在构建时不需要它。

我想也许我可以这样构建：

entry: {
    app: paths.appIndexJs,
    background: paths.backgroundIndexJs,
    content: paths.contentIndexJs
},

但这也会返回与未定义的无法读取属性“过滤器”相同的错误。

出于好奇，我尝试了以下方法，据我所知将文件合并在一起：

entry: [
    paths.appIndexJs,
    paths.backgroundIndexJs,
    paths.contentIndexJs
].filter(Boolean),

项目构建完成，但即便如此，我也没有看到来自 2 个不同文件的任何函数出现。

我从头开始创建了 React 应用程序，并且我知道多入口点方法可以生成多个文件，但是当使用 create-react-app 命令创建项目并弹出时，我无法获得入口点按预期工作。

我认为这里的问题不在于条目是如何设置的，而是在没有在条目行设置“过滤器（布尔）”的情况下尝试构建时显示的错误。

我可以从“通常”和弹出的 create-react-app 中看到的唯一区别是 webpack 的“通常”方式如下所示：

// This has worked in the past when making configs from scratch
module.exports = { 
    entry: {
        app: paths.appIndexJs
        background: paths.backgroundIndexJs
        paths.contentIndexJs
    },

弹出的 create-react-app 看起来像这样：

// this is auto generated and unsure if is the reason why it fails to 
module.exports = function(webpackEnv) { 
    const isEnvDevelopment = webpackEnv === "development";
    const isEnvProduction = webpackEnv === "production";

    ......

    return {
        entry: {
            app: [paths.appIndexJs]
            background: [paths.backgroundIndexJs],
            content: [paths.contentIndexJs]
        },

        .....
    };
};

不确定这是否对入口点有任何影响，但我看不到与此相关的任何其他内容。

什么是错误消息过滤器（布尔值），我该如何解决？

Answer 1

从gitmemory 找到解决方案

问题出在 CRA 的 ManifestPlugin 配置中。它假定入口点将被称为 main，来自 Webpack 的默认值：

    // Generate an asset manifest file with the following content:
 // - "files" key: Mapping of all asset filenames to their corresponding
 //   output file so that tools can pick it up without having to parse
 //   `index.html`
 // - "entrypoints" key: Array of files which are included in `index.html`,
 //   can be used to reconstruct the HTML if necessary
 new ManifestPlugin({
   fileName: 'asset-manifest.json',
   publicPath: publicPath,
   generate: (seed, files, entrypoints) => {
     const manifestFiles = files.reduce((manifest, file) => {
       manifest[file.name] = file.path;
       return manifest;
     }, seed);
     const entrypointFiles = entrypoints.main.filter(  // <--- This line here
       fileName => !fileName.endsWith('.map')
     );

     return {
       files: manifestFiles,
       entrypoints: entrypointFiles,
     };
   },
 }),

修复了

 ...
const entrypointFiles = {};
Object.keys(entrypoints).forEach(entrypoint => {
  entrypointFiles[entrypoint] = entrypoints[entrypoint].filter(fileName => !fileName.endsWith('.map'));
});
...