Installation
npm init -y
: Creates a package.json file for your project.npm i -D webpack webpack-cli
: Installs Webpack and the Webpack Command Line Interface (CLI).npm install webpack-dev-server --save-dev
: Installs the Webpack development server.npm i -D sass style-loader css-loader sass-loader
: Installs tools for processing Sass and CSS files.npm i -D html-webpack-plugin html-loader
: Installs tools for processing HTML files.npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react
: Installs Babel tools. These tools make your JavaScript code compatible with older browsers.npm i -D react react-dom
: Installs the React library and the ReactDOM module.npm i -D tailwindcss
: Installs the Tailwind CSS library.npm i -D postcss postcss-loader postcss-preset-env
: Installs PostCSS tools.npm i redux
: Installs the Redux library.npm install @reduxjs/toolkit
: Installs the Redux Toolkit library.npm i -D react-redux
: Installs the React-Redux connection.npm i --save-dev @redux-devtools/core
: Installs Redux DevTools.npm i -D react-router
: Installs the React Router library.npm i -D react-router-dom
: Installs the React Router DOM module.npm i -D webpack-bundle-analyzer
: Installs the Webpack Bundle Analyzer tools. These tools visualize the sizes and usage of files in your project.
To use these commands, navigate to your project directory and run them one by one. They will install the necessary tools and libraries for your React project.
Files
touch webpack.config.js
// webpack.config.jsx
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
mode: 'production',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
clean: true,
},
//devtool: 'source-map',
devServer: {
static: {
directory: path.resolve(__dirname, 'dist'),
},
port: 3000,
open: true,
hot: true,
compress: true,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public', 'index.html'),
}),
//new BundleAnalyzerPlugin(),
],
resolve: {
extensions: ['.js', '.jsx', '.md'],
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
}
touch .babelrc
// .babalrc
{
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic"
}
]
]
}
touch tailwind.config.js
// tailwind.config.js
module.exports = {
content: ['./public/index.html', './src/**/*.{html,js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
touch postcss.config.js
// postcss.config.js
const tailwindcss = require('tailwindcss')
module.exports = {
plugins: ['postcss-preset-env', tailwindcss],
}
touch netlify.toml
// toml
[[redirects]]
from = "/*"
to = "/"
status = 200
touch .gitignore
// .gitignore
node_modules
mkdir public
mkdir src
cd public/
touch index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<title>Webpack - Starter</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
cd ..
cd src
touch index.js
import './styles/main.scss'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './redux/config/store.jsx'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
</React.StrictMode>
)
touch App.js
import Header from './components/Header/Header.jsx'
import Navigation from './components/Navigation/Navigation.jsx'
import { Route, Routes } from 'react-router-dom'
import About from './routes/About/About.jsx'
import Contact from './routes/Contact/Contact.jsx'
export default function App() {
return (
<div>
<Routes>
<Route exact path='/' element={<Navigation />}>
<Route index element={<Header />} />
<Route path='about' element={<About />} />
<Route path='contact' element={<Contact />} />
</Route>
</Routes>
</div>
)
}
mkdir styles
mkdir routes
mkdir redux
mkdir components
cd styles
touch main.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
cd ..
cd routes
mkdir About
cd About
touch About.jsx
export default function About() {
return (
<div>
<p className='text-red-600 text-2xl font-bold'> ABOUT PAGE! </p>
</div>
)
}
cd ..
mkdir Contact
cd Contact
touch Contact.jsx
import './contact.styles.scss'
export default function Contact() {
return (
<div className='contact'>
<header className='contact-header'>
<h1> Contact Page </h1>
</header>
</div>
)
}
touch contact.styles.scss
.contact {
background-color: cadetblue;
.contact-header {
padding: 10px;
h1 {
color: brown;
font-weight: bold;
}
}
}
cd ..
cd ..
cd redux
mkdir actions
mkdir config
cd config
touch store.jsx
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({
reducer: {},
})
export default store
cd ..
cd ..
cd components/
mkdir Navigation
mkdir Header
cd Navigation
touch Navigation.jsx
import { NavLink, Outlet } from 'react-router-dom'
export default function Navigation() {
return (
<nav>
<ul className='flex gap-8'>
<li>
<NavLink to='/'> Home </NavLink>
</li>
<li>
<NavLink to='/about'> About </NavLink>
</li>
<li>
<NavLink to='contact'> Contact </NavLink>
</li>
</ul>
<Outlet />
</nav>
)
}
cd ..
cd Header
touch Header.jsx
export default function Header() {
return (
<header>
<h1 className='font-bold text-3xl text-blue-600'> Webpack Starter </h1>
</header>
)
}
package.json - scripts
"scripts": {
"dev": "webpack serve --mode development",
"start": "webpack serve --mode development",
"build": "webpack --mode development"
},
index.html
<base href="/" />
Usage
Run Dev Server (Port 3000)
- npm run dev
Build for production
- npm run build
Folder and File structure
node_modules
public
- index.html
src
components
Header
- Header.jsx
Navigation
- Navigation.jsx
redux
actions
config
- store.jsx
routes
About
- About.jsx
Contact
Contact.jsx
contact.styles.scss
App.js
index.js
.babelrc
.gitignore
netlify.toml
package-lock.json
package.json
postcss.config.js
tailwind.config.js
webpack.config.js