Between reinventing the wheel to make your own Webpack build of a React app, and using a "starter kit" or template, there is this option.
I think this make it easier to wrap your head around the meat of what Webpack does.
- Start with a bare-bones working Webpack configuration, that builds a working React app you can see right away.
- Make incremental tweaks and additions to learn-as-you-go.
Because gists cannot show directory structure, I could not show that you put the app.js file in a subdirectory named src/.
Your actually project directory needs to start out like this:
├── index.html
├── package.json
├── src
│ └── app.js
└── webpack.config.js
Important: replace ALL the strings in the sample package.json file that are bracketed (<...>) with your own preferences, or you will get lots of warnings, and npm will not run.
Once you have copied the contents of these files to your own project, do the following.
npm install
Once all the dependencies have been installed, start up the app like this:
npm start
Webpack will compile your React app and open a browser window for it. As you edit your app.js file, the browser window should reload automatically.
Your directory will now look like this.
├── bundle.js
├── bundle.js.map
├── index.html
├── node_modules/
├── package.json
├── src
│ └── app.js
└── webpack.config.js
Note: You do not create the node_modules directory yourself; it gets created when you first run npm install.
Webpack creates the bundle.js file with your compiled React app in it.
You can "require" or "import" additional submodules into your app, but every time you add a new file you may need to stop the watch process with CTRL+C, and then re-run npm start.