时间戳

首页 > 解决方案 > 更改条目配置后，弹出的 React 应用程序停留在“启动开发服务器”上

reactjs - 更改条目配置后，弹出的 React 应用程序停留在“启动开发服务器”上

问题描述

我需要在 React App 中支持多个入口点。执行此操作的选项之一是通过弹出：npm run eject。

这是我使用的原始来源How to Add Multiple Entry Points to Your React App

创建一个新应用程序并弹出它：

$ npx create-react-app react-hello
$ cd react-hello
$ npm run eject

然后添加到App.js：

import React from "react";

并启动应用程序以确保它使用默认配置：

$ npm start

为了能够有多个入口点，我必须entry采用config/webpack.config.js. 原始配置看起来像（没有注释）：

entry: [
 isEnvDevelopment &&
    require.resolve('react-dev-utils/webpackHotDevClient'),
  paths.appIndexJs,
].filter(Boolean),

为了支持多个条目，我必须将其转换为关联数组/哈希表，在这种情况下，我将index其用作默认索引页的键：

entry: {
  index: [
    isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs
   ].filter(Boolean)
},

一旦我改变格式，npm start卡住并Starting the development server...永远持续下去。我尝试构建它并得到一个错误：

$ npm run build

...
> node scripts/build.js

Creating an optimized production build...

Failed to compile.

Cannot read property 'filter' of undefined

注意：我还没有添加新条目，我只是修改当前条目以便以后能够添加另一个条目。

Webpack 入口点说我的配置是正确的。

我在做什么错和想念，你能帮忙吗？

标签： reactjsnpmwebpack

解决方案

我遇到了同样的问题。对我来说，问题来自更下方的“ManifestPlugin”。看起来初始配置是指默认的“主”入口点键。

new ManifestPlugin({
    fileName: 'asset-manifest.json',
    publicPath: paths.publicUrlOrPath,
    generate: (seed, files, entrypoints) => {
      const manifestFiles = files.reduce((manifest, file) => {
        manifest[file.name] = file.path;
        return manifest;
      }, seed);
      
      // This next line is the problem!!!!
      const entrypointFiles = entrypoints.main.filter(
        fileName => !fileName.endsWith('.map')
      );

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

因为您将入口点设为“index”而不是“main”，entrypoints.main 现在未定义。如果您要将上面的代码更改为 entrypoints.index，那么代码应该可以按预期工作。但是，这种解决方案不是很灵活，只包括一个入口点。我想出的最终解决方案是这个。

new ManifestPlugin({
    fileName: 'asset-manifest.json',
    publicPath: paths.publicUrlOrPath,
    generate: (seed, files, entrypoints) => {
      const manifestFiles = files.reduce((manifest, file) => {
        manifest[file.name] = file.path;
        return manifest;
      }, seed);
      const entrypointFiles = Object.values(entrypoints).map(values => {
        return values.filter(
          fileName => !fileName.endsWith('.map')
        )
      });

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

推荐阅读