DEV Community

Cover image for Webpack installation step by step
Ozan Tekin
Ozan Tekin

Posted on

Webpack installation step by step

#webpack #react #babel #netlify

Webpack Tutorial for Beginners

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

  .contact-header {
    padding: 10px;

    h1 {
      color: brown;
      font-weight: bold;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode
  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>
  )
}
Enter fullscreen mode Exit fullscreen mode
  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>
  )
}
Enter fullscreen mode Exit fullscreen mode
  1. package.json - scripts 
  "scripts": {
    "dev": "webpack serve --mode development",
    "start": "webpack serve --mode development",
    "build": "webpack --mode development"
  },
Enter fullscreen mode Exit fullscreen mode
  1. index.html 
<base href="/" />
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Read next

vigneshiyergithub profile image

Exploring the ECMAScript 2024 Updates: A Beginner’s Guide

vigneshiyergithub -

gav_o profile image

UI Verse

Gav -

gcizman profile image

How to solve this problem in nodejs?

Gcobani Mkontwana -

ellis22 profile image

Spec Coder: The Ultimate VS Code Extension for Smarter, Faster Coding

Ellis -