Code Examples of Webpack Practice Projects

Here are the detailed steps and code examples for practice projects: a simple website and a React project, both configured to use Webpack 5.

1. Simple Website

Step 1: Set Up the Project

Create the project directory and initialize npm:

mkdir simple-website
cd simple-website
npm init -y

Install Webpack and Webpack CLI:

npm install --save-dev webpack webpack-cli

Create the directory structure:

mkdir src
touch src/index.js
mkdir dist
touch dist/index.html

Step 2: Configure Webpack

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  devServer: {
    contentBase: "./dist",
  },
};

Install HtmlWebpackPlugin:

npm install --save-dev html-webpack-plugin

src/index.js:

console.log("Hello, Webpack!");

src/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Website</title>
  </head>
  <body>
    <h1>Hello, Webpack!</h1>
  </body>
</html>

Add scripts to package.json:

"scripts": {
  "build": "webpack",
  "start": "webpack serve --open"
}

Step 3: Run the Project

Build the project:

npm run build

Start the development server:

npm start

2. React Project

Step 1: Set Up the Project

Create the project directory and initialize npm:

mkdir react-project
cd react-project
npm init -y

Install React and necessary dependencies:

npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

Create the directory structure:

mkdir src
touch src/index.js src/App.js src/index.html
mkdir dist

Step 2: Configure Babel and Webpack

babel.config.json:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  devServer: {
    static: "./dist",
  },
};

src/index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

src/App.js:

import React from "react";

const App = () => {
  return <h1>Hello, React with Webpack!</h1>;
};

export default App;

src/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Project</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Add scripts to package.json:

"scripts": {
  "build": "webpack",
  "start": "webpack serve --open"
}

Step 3: Run the Project

Build the project:

npm run build

Start the development server:

npm start

By following these steps and using the provided code, you can set up and run a simple website and a React project using Webpack 5.