Resources: Setting up a basic Webpack project

Setting up a basic Webpack project

Tags: #webdev, #javascript, #tools, #beginners

Creating a Webpack project doesn't have to be complex. This guide will take you through the steps of setting up a simple Webpack project, covering all essential configurations.

Prerequisites

Ensure Node.js and npm are installed. Verify this by running the following commands in your terminal:

node -v
npm -v

Step 1: Initialize Project

Open a terminal, create a new directory, navigate into it, and initiate a Node.js project.

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

Step 2: Install Webpack

Install Webpack and the Webpack CLI as dev dependencies.

npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin nodemon

Step 3: Configure Webpack

Create a webpack.config.js file in your project root. Add the following code:

const path = require('path');

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

This file directs Webpack on how to bundle your assets.

Step 4: Update NPM Script

Modify your package.json to include a build script:

"scripts": {
  "build": "webpack --config webpack.config.js"
}

To run the build, execute:

npm run build

Step 5: Check Output

After running the build script, a bundle.js file should appear in the dist folder. This is your bundled code.