Progressive Full Stack Application Development with Live Projects

Shopping cart
No products in the cart.
Frontend Engineering

Using Webpack in JS Project

Webpack Tutorial for JavaScript beginners

In the previous lesson, we introduced Webpack – The Module Bundler for JavaScript Applications, its features and benefits. In this lesson, we will move further and use Webpack to enhance the final build of our simple Node Project.

Webpack is a powerful tool that bundles our JavaScript files (and other assets) into a single file (or multiple files) for deployment.

Setting up Webpack for a JavaScript project involves few steps. I assume that you have node and npm installed in your machine. Here’s a step-by-step guide to get you started:

1. Set Up Your Project Directory

1. Create a Project Directory

mkdir my-webpack-project
cd my-webpack-project

2. Initialize a New Node.js Project This will create a package.json file to manage your dependencies.

Initialize a New Node.js Project This will create a package.json file to manage your dependencies.

2. Install Webpack and Related Dependencies

  1. Install Webpack and Webpack CLI Webpack and its CLI (Command Line Interface) are necessary for bundling and running Webpack commands.
npm install --save-dev webpack webpack-cli

2. Install Webpack Dev Server (Optional but Recommended for Development) This provides a development server with live reloading.

npm install --save-dev webpack-dev-server

3.Create Project Structure

  1. Create Basic Project Files
  • src/index.js: Your main JavaScript file.
  • index.html: Your HTML file to include the bundled JavaScript.

Create these files and directories:

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

Add some content to these files:

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

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="dist/main.bundle.js"></script>
</body>
</html>

4. Configure Webpack

  1. Create a Webpack Configuration File Create a file named webpack.config.js in the root of your project directory.
touch webpack.config.j

Add the following basic configuration:

const path = require('path');

module.exports = {
    entry: './src/index.js', // Entry point of the application
    output: {
        filename: 'main.bundle.js', // Output bundle file name
        path: path.resolve(__dirname, 'dist'), // Output directory
    },
    mode: 'development', // Set the mode to development
    devServer: {
        contentBase: path.join(__dirname, 'dist'), // Directory to serve files from
        compress: true,
        port: 9000, // Port to run the dev server
    },
};

5. Add Build and Dev Scripts

  1. Update package.json Scripts

Open package.json and add the following scripts under the "scripts" section:

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

The "build" script will bundle your files for production, and "start" will start the development server.

6. Run Webpack

  1. Build Your Project Run the following command to bundle your JavaScript files:
npm run build

This will create a dist directory with the main.bundle.js file.

2. Run the Development Server To start the development server with live reloading, use:

npm start

This will serve your project at http://localhost:9000 (or whichever port you specified) and automatically reload when you make changes to your source files.

7. Verify the Setup

  1. Open index.html in Your Browser If you are using the development server, open http://localhost:9000 in your browser. You should see the console log “Hello, Webpack!” in your browser’s console.
  2. Make Changes and Test Try editing src/index.js and save the file. If you’re using the development server, you should see the changes reflected in the browser automatically.

And that’s it! You’ve set up a basic Webpack configuration for a JavaScript project. You can further customize Webpack by adding loaders, plugins, and other configurations as needed.

Leave a Reply