Change/add create-react-app entry point or location of index.js

Question

I am trying to use create-react-app to create a simple web-app. I have moved the pages and components into separate directories under src labeled pages and components. I would like to change/add the entry point for index.js from src/index.js to src/pages/index.js. Another option would be to keep index.js in src/ and import from pages and component directories. Can someone help me to find how i can change the entry point path?

I can't seem to find the location of the default html-webpack-plugin config file.

Here is what I would like the structure to be:

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

components/
   - Filter.js

serviceWorker.js

Answer 1

I used react-rewired to achieve something like this: https://github.com/timarney/react-app-rewired/issues/189

in my 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;
  },
}

I needed to run on a different file but only when running the development server the link above has the full solution

Answer 2

Try using npm run eject.

this will take all script from node_module/react-script in the project folder. There you will be able to access webpack.config.js file in config folder. you can search for html-webpack-plugin and get the access point. I have added my access point to config/paths.js and used as default access point which worked for me.

NOTE: make sure you don't have any different configuration setting as it gets very difficult to manage, if environment setup changes or doesn't match.