更改/添加 index.js 的 create-react-app 入口点或位置答案

【问题标题】：Change/add create-react-app entry point or location of index.js更改/添加 index.js 的 create-react-app 入口点或位置
【发布时间】：2019-04-03 12:01:33
【问题描述】：

我正在尝试使用 create-react-app 创建一个简单的网络应用程序。我已将页面和组件移动到标记为pages 和components 的src 下的单独目录中。我想将 index.js 的入口点从 src/index.js 更改/添加到 src/pages/index.js。另一种选择是将 index.js 保留在 src/ 并从页面和组件目录导入。有人可以帮我找到如何更改入口点路径吗？

我似乎找不到默认 html-webpack-plugin 配置文件的位置。

这是我想要的结构：

(in src)
...
pages/
   - App.js
   - Home.js

components/
   - Filter.js

serviceWorker.js

【问题讨论】：

我正在使用 next 作为项目的路由器

标签： javascript reactjs webpack plugins config

【解决方案1】：

我使用 react-rewired 来实现这样的目标： https://github.com/timarney/react-app-rewired/issues/189

在我的 config-overrides.js 中

console.log("@@@@@@@@@@@@@@@@@@@@@@@");
console.log("@ using react-rewired @");
console.log("@@@@@@@@@@@@@@@@@@@@@@@");

module.exports = {
  // The Webpack config to use when compiling your react app for development or production.
  webpack: function(config, env) {
    // ...add your webpack config
    console.log("@@@@@@@@@@@");
    console.log("@ webpack @");
    console.log("@@@@@@@@@@@");
    console.log({config, env});

    if (env === 'development') {
      config.entry = config.entry.replace(new RegExp("index.ts$"), 'runApp.tsx');
      console.log("entry point changed:", config.entry);
    }

    return config;
  },
}

我需要在不同的文件上运行，但仅在运行开发服务器时上面的链接有完整的解决方案

【讨论】：

【解决方案2】：

尝试使用 npm runeject。

这将从项目文件夹中的 node_module/react-script 中获取所有脚本。在那里，您将能够访问 config 文件夹中的 webpack.config.js 文件。您可以搜索 html-webpack-plugin 并获取访问点。我已将访问点添加到 config/paths.js 并用作对我有用的默认访问点。

注意：请确保您没有任何不同的配置设置，因为如果环境设置更改或不匹配，它会变得非常难以管理。

【讨论】：