React 18 + Webpack 5 Boilerplate
A ready to use simple webpack boilerplate.
Instructions
- Clone this repo
- Run
npm install - Run
npm start, localhost:8080 will open up in your default browser
If you prefer to install things yourself you can follow the instructions below
- Install the following:
npm install -g webpack webpack-cli
npm install
- Update your scripts to the following:
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
- Create .babelrc file with the following configurations:
{
"presets": ["env", "react"]
}
- Create webpack.config.js file with the following configurations:
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
};
- Create src folder with index.js and index.html file.
- index.js should have:
import React from 'react';
import ReactDOM from 'react-dom/client';
import difference from 'lodash'
import "./sample.css"
const Index = () => {
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
[5, 6].map((n) => console.log(n));
console.log(difference([2, 1], [2, 3]));
return <div>Hello React!</div>;
};
const container = document.getElementById('index');
const root = ReactDOM.createRoot(container);
root.render(<Index/>);
- index.html should have:
<!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>
- Create .gitignore file and input /node_modules/ and /dist.
Feature
- HtmlWebpackPlugin custom header configuration
- ProgressPlugin added
- Added Lodash and chuck build are added
Next Updated https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5