React with Webpack

Configurations

You might find it troublesome at first. But trust me it's just one time configuration!

Webpack Config

First you need to understand concept of Webpack here

You can find the config in webpack.config.js in root folder.

Babel Config

For using Babel with the latest React (16.10.1) you need to install @babel/<package-name> instead of babel except babel-loader in devDependecies.

You can find this config in .babelrc in root folder.

Start Creating App

Our entry point has been defined on webpack.config.js as index.js on src folder. What in it is just create ReactDOM and import it as App.

You can find this config in ./src/index.js

Create HTML template

This is unnecesary things to do, but it might be useful if you want to add extra dependencies later or import something in html. What it really do is just import index.js above.

You can find this config in ./src/index.html

Running Script

Because we don't create react app with react-create-app so we need to define how to serve our app in package.json at scripts section

You can find this config in package.json in root folder

Development

After the struggle configuring this package. Now you can start developing, there is no difference between developing React with or without Webpack.

npm start

Production Build

npm run build