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 🙂