Webpack 4 React JS Configuration

Configuring the React with Webpack 4 is now made very easier. Webpack 4 can also work like Parcel JS’s zero config build system. But configuring Webpack 4 on top of React may seem a bit of mystery for beginners. So let’s dive into the tutorial…

First install the dependencies for React JS:

npm install --save react react-dom

Then install dev dependencies Webpack:

npm install --save-dev webpack webpack-cli babel-loader babel-preset-env babel-preset-react css-loader extract-text-webpack-plugin@next file-loader

Add a new file named `webpack.config.js` in your root folder and add the following configurations:

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  mode: "development",
  watch: true,
  entry: "./src/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
          presets: ["react"]
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          loader: "css-loader",
          options: {
            modules: true
          }
        })
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        query: {
          name: "[name].[ext]?[hash]"
        }
      }
    ]
  },

  plugins: [new ExtractTextPlugin("style.css")],

  resolve: {
    extensions: [".js", ".json", ".jsx"]
  }
};

Lets update our package.json by adding the following commands inside script section:

...
"scripts": {
  "webpack": "npx webpack --config webpack.config.js",
  "build": "npx webpack -p --config webpack.config.js"
}
...

You are almost done now.

Just enter the command `webpack` when developing, which will bundles all of your assets without compression.

And for the production build, use the command `npm run build`.

If you stuck anywhere following the tutorial, just add a comment, am more than happy to help you, thank you 🙂