Webpack Tutorial for Beginners

Webpack Tutorial for Beginners

Step by Step Tutorial

·

5 min read

Installation

  1. npm init -y: Creates a package.json file for your project.

  2. npm i -D webpack webpack-cli: Installs Webpack and the Webpack Command Line Interface (CLI).

  3. npm install webpack-dev-server --save-dev: Installs the Webpack development server.

  4. npm i -D sass style-loader css-loader sass-loader: Installs tools for processing Sass and CSS files.

  5. npm i -D html-webpack-plugin html-loader: Installs tools for processing HTML files.

  6. 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.

  7. npm i -D react react-dom: Installs the React library and the ReactDOM module.

  8. npm i -D tailwindcss: Installs the Tailwind CSS library.

  9. npm i -D postcss postcss-loader postcss-preset-env: Installs PostCSS tools.

  10. npm i redux: Installs the Redux library.

  11. npm install @reduxjs/toolkit: Installs the Redux Toolkit library.

  12. npm i -D react-redux: Installs the React-Redux connection.

  13. npm i --save-dev @redux-devtools/core: Installs Redux DevTools.

  14. npm i -D react-router: Installs the React Router library.

  15. npm i -D react-router-dom: Installs the React Router DOM module.

  16. 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

  1. 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'],
  },
}
  1. touch .babelrc
// .babalrc
{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}
  1. touch tailwind.config.js
// tailwind.config.js
module.exports = {
  content: ['./public/index.html', './src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. touch postcss.config.js
// postcss.config.js
const tailwindcss = require('tailwindcss')
module.exports = {
  plugins: ['postcss-preset-env', tailwindcss],
}
  1. touch netlify.toml
// toml
[[redirects]]
  from = "/*"
  to = "/"
  status = 200
  1. touch .gitignore
// .gitignore
node_modules
  1. mkdir public

  2. mkdir src

  3. cd public/

  4. 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>
  1. cd ..

  2. cd src

  3. 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>
)
  1. 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>
  )
}
  1. mkdir styles

  2. mkdir routes

  3. mkdir redux

  4. mkdir components

  5. cd styles

  6. touch main.scss

@tailwind base;
@tailwind components;
@tailwind utilities;
  1. cd ..

  2. cd routes

  3. mkdir About

  4. cd About

  5. touch About.jsx

export default function About() {
  return (
    <div>
      <p className='text-red-600 text-2xl font-bold'> ABOUT PAGE! </p>
    </div>
  )
}
  1. cd ..

  2. mkdir Contact

  3. cd Contact

  4. 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>
  )
}
  1. touch contact.styles.scss
.contact {
  background-color: cadetblue;

  .contact-header {
    padding: 10px;

    h1 {
      color: brown;
      font-weight: bold;
    }
  }
}
  1. cd ..

  2. cd ..

  3. cd redux

  4. mkdir actions

  5. mkdir config

  6. cd config

  7. touch store.jsx

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: {},
})

export default store
  1. cd ..

  2. cd ..

  3. cd components/

  4. mkdir Navigation

  5. mkdir Header

  6. cd Navigation

  7. 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>
  )
}
  1. cd ..

  2. cd Header

  3. touch Header.jsx

export default function Header() {
  return (
    <header>
      <h1 className='font-bold text-3xl text-blue-600'> Webpack Starter </h1>
    </header>
  )
}
  1. package.json - scripts
  "scripts": {
    "dev": "webpack serve --mode development",
    "start": "webpack serve --mode development",
    "build": "webpack --mode development"
  },
  1. 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

Live Demo | Repository