How to Create a React app from scratch using Webpack 4 (w/o using react-create-app)

Image for post
Image for post
mkdir react_search
cd react_search
npm init // creates a package.json file
npm init -y
npm i webpack webpack-cli -D
console.log("hello");
{
"name": "react_search",
"version": "1.0.0",
"description": "Search app using React",
"main": "index.js",

"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"

}, "keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.10"
}
}
npm run start
Image for post
Image for post
npm run build
Image for post
Image for post

Setting Up React and Babel

npm i react react-dom -S
npm i babel-core babel-loader babel-preset-env babel-preset-react -D
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
{
"presets": ["env", "react"]
}
import React from "react";
import ReactDOM from "react-dom";
const Index = () => {
return <div>Hello React!</div>;
};
ReactDOM.render(<Index />, document.getElementById("index"));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
</head>
<body>
<section id="index"></section>
</body>
</html>
npm i html-webpack-plugin -D
const HtmlWebPackPlugin = require("html-webpack-plugin");const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [htmlPlugin]
};
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
]
Image for post
Image for post

Setting up webpack-dev-server

npm i webpack-dev-server -D
{
"name": "react_search",
"version": "1.0.0",
"description": "Search app using React",
"main": "index.js",
"scripts": {

"start": "webpack-dev-server --mode development --open", "build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.0.6",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"
}
}

Setting up CSS

npm i css-loader style-loader -D
const HtmlWebPackPlugin = require("html-webpack-plugin");const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [htmlWebpackPlugin]
};

Making CSS modular

const HtmlWebPackPlugin = require("html-webpack-plugin");const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlWebpackPlugin]
};
Form button.primaryButton {
background-color: green;
}
Search button.primaryButton {
background-color: blue;
}
Image for post
Image for post

EDIT

Importing CSS

Image for post
Image for post
import style from "./Search.css"
const Search = () => {
return <div className={style.
nameOfYourCSSClass}>
Hello Search Component :)
</div>
}

My Webpack boilerplate

Entry and output points

module.exports = {

entry: "./src/app.js", module: {
...
}
}
const path = require('path')
module.exports = {
entry: "./src/app.js",

output: {
path: path.resolve(‘dist’),
filename: ‘bundled.js’
},

module: {
...
}
}

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store