A start configuration to include support in any project to react with webpack 4 and Babel 7.

package.json

{
  "name": "Package Name",
  "version": "0.1.0",
  "description": "Package description",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch --info-verbosity verbose --progress",
    "prod": "npm run production",
    "production": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mauricio Rodrigues",
  "license": "MIT",
  "dependencies": {
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0"
  }
}

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    query: {
                        presets: ['@babel/preset-react', '@babel/preset-env']
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".es6"]
    }
};

Description

This is a ideal way to include support to a existing project. It's simple and clean.

Configuration

Create or update wepack.config.json and package.json files.

In case of update of packages.json file, you need include the dependencies and devDependencies into you existing package.json file.

After modify or create the files, run:

npm install

Usage

1. Run webpack in development mode:

npm run dev

2. Run webpack in production mode:

npm run prod

Enjoy!