The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Basic Webpack Build

Next ►
►

In this section, we will walk through the process of creating a basic Webpack build. This will include setting up a simple project, configuring Webpack, and running the build process. By the end of this section, you will have a foundational understanding of how to use Webpack to bundle your JavaScript files.

Step-by-Step Guide

  1. Setting Up the Project

First, let's set up a new project directory and initialize it with npm.

mkdir my-webpack-project
cd my-webpack-project
npm init -y

This will create a new directory called my-webpack-project and initialize it with a package.json file.

  1. Installing Webpack and Webpack CLI

Next, we need to install Webpack and the Webpack CLI as development dependencies.

npm install --save-dev webpack webpack-cli

  1. Creating the Project Structure

Create the following directory structure for your project:

my-webpack-project/
├── src/
│   └── index.js
├── dist/
└── package.json
  • src/ directory will contain your source files.
  • dist/ directory will be used for the output files generated by Webpack.
  • index.js is the entry point for your application.

  1. Writing the Entry Point

Open src/index.js and add some basic JavaScript code:

// src/index.js
console.log('Hello, Webpack!');

  1. Configuring Webpack

Create a webpack.config.js file in the root of your project directory:

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
};

Explanation:

  • entry: Specifies the entry point of your application.
  • output: Defines the output file name and path.
  • mode: Sets the mode to 'development' for easier debugging.

  1. Running the Build

Add a build script to your package.json:

// package.json
{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

Now, run the build script:

npm run build

This will generate a bundle.js file in the dist/ directory.

  1. Verifying the Build

To verify that everything is working correctly, create an index.html file in the dist/ directory:

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Project</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

Open dist/index.html in your browser. You should see "Hello, Webpack!" in the console.

Summary

In this section, we covered the basics of setting up a Webpack project, including:

  • Initializing a new project with npm.
  • Installing Webpack and Webpack CLI.
  • Creating a simple project structure.
  • Writing a basic entry point.
  • Configuring Webpack.
  • Running the build process.

This foundational knowledge will prepare you for more advanced topics in Webpack. In the next module, we will dive deeper into Webpack's core concepts, such as entry points, output configuration, loaders, and plugins.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved