How do I install webpack and create your first bundle?

# Step 1: Project Setup and Basic Bundling 1. Create a project directory: ```bash mkdir webpack-demo cd webpack-demo npm init -y ``` 2. Install Webpack and CLI: ```bash npm install webpack webpack-cli --save-dev ``` 3. Create `src/index.js`: ```javascript import _ from 'lodash'; function component() { const element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component()); ``` 4. Install lodash: ```bash npm install --save lodash ``` 5. Create `webpack.config.js`: ```javascript import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); export default { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, }; ``` 6. Add to `package.json` scripts: ```json "scripts": { "build": "webpack" } ``` 7. Run `npm run build`. Check `dist/main.js` and serve `dist` folder with a local server.

How do I master core concepts: entry, output, loaders, plugins?

# Step 2: Core Configuration Concepts Read https://webpack.js.org/concepts/. 49 1. **Entry**: Edit `webpack.config.js` to add multiple entries: ```javascript entry: { index: './src/index.js', print: './src/print.js', }, ``` 2. **Output**: Customize filenames: ```javascript output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), clean: true, }, ``` 3. **Loaders** (preview): For `.txt` files: ```javascript module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, ``` Install `raw-loader`: `npm i raw-loader --save-dev`. 4. **Plugins** (preview): Add later. 5. **Mode**: Set `mode: 'development'`. Run `npm run build` to test changes. Experiment by changing entry/output and rebuilding.

How do I configure development server and source maps?

# Step 3: Development Workflow 1. Install dev server: ```bash npm install --save-dev webpack-dev-server ``` 2. Update `webpack.config.js`: ```javascript mode: 'development', devtool: 'inline-source-map', devServer: { static: './dist', }, ``` 3. Add script: ```json "start": "webpack serve --open" ``` 4. Run `npm start`. Edit `src/index.js`, see live reload and debug in browser devtools. 5. (Opt) Add `watch: "webpack --watch"` for file watching without server. 47

How do I add loaders for css and plugins for html?

# Step 4: Asset Handling 1. Install loaders/plugins: ```bash npm install --save-dev style-loader css-loader html-webpack-plugin ``` 2. Create `src/style.css`: ```css body { background: lightblue; } ``` Import in `index.js`: `import './style.css';` 3. Update config rules: ```javascript module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new HtmlWebpackPlugin({ title: 'Dev', }), ], ``` 4. Run `npm start`. See styled page with auto-generated HTML. 46 45

How do I build optimized production bundles?

# Step 5: Production Optimization 1. Install merge: ```bash npm install --save-dev webpack-merge ``` 2. Create `webpack.common.js`: ```javascript import path from 'node:path'; import { fileURLToPath } from 'node:url'; import HtmlWebpackPlugin from 'html-webpack-plugin'; // ... __dirname setup export default { entry: './src/index.js', plugins: [new HtmlWebpackPlugin({ title: 'Production' })], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), clean: true, }, }; ``` 3. `webpack.prod.js`: ```javascript import { merge } from 'webpack-merge'; import common from './webpack.common.js'; export default merge(common, { mode: 'production', devtool: 'source-map', }); ``` 4. Update scripts: `"build": "webpack --config webpack.prod.js"` 5. Run `npm run build`. Inspect minified `dist` assets. 45

Learn Webpack: From Setup to Production in 5 Steps

🧰

Instant Toolkit

2 artifacts

📋
Step-by-Step Guide

1

Step 1: Project Setup and Basic Bundling

Create a project directory:

mkdir webpack-demo
cd webpack-demo
npm init -y

Install Webpack and CLI:

npm install webpack webpack-cli --save-dev

Create src/index.js:

import _ from 'lodash';

function component() {
  const element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}

document.body.appendChild(component());

Install lodash:

npm install --save lodash

Create webpack.config.js:

import path from 'node:path';
import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Add to package.json scripts:

"scripts": {
  "build": "webpack"
}

Run npm run build. Check dist/main.js and serve dist folder with a local server.

Why this step matters:

-Establishes bundling workflow for JavaScript modules
-Teaches dependency resolution essential for modern apps

1-2 hours

Node.js 18+, npm, VS Code, Live Server extension

$0

Definition of Done

•Generated dist/main.js bundle
•HTML page displays 'Hello webpack' using bundled code

Common Mistakes to Avoid

❌ Forgetting to install lodash dependency

→Run `npm install --save lodash` before building

❌ Incorrect path in entry/output

→Verify `./src/index.js` exists and use `path.resolve`

2

Following along, or just reading? 👀

Spin up a personalized “learn Webpack” plan you can save, check off, and return to anytime — unlimited on the free trial.

Start free trial →

3

4

5

🎥
Suggested Videos

Learn Webpack - Full Tutorial for Beginners

Webpack 5 Crash Course | Frontend Development Setup

📚
Learning Resources

📖 Online Courses

Webpack 5: The Complete Guide For Beginners

beginner

Paid

Udemy

Webpack 5 Fundamentals

beginner

Paid

Pluralsight

Webpack Fundamentals

intermediate

Paid

Frontend Masters

📖 Recommended Books

SurviveJS - Webpack 5

beginner

by Juho Vepsäläinen

🌐 Helpful Websites

Webpack Official Documentation

documentation

Complete guides, concepts, and API reference

Webpack Guides

documentation

Step-by-step tutorials for common setups

🛠️ Useful Tools

webpack

Bundler

Module bundler for JavaScript applications

webpack-dev-server

Dev Server

Development server with live reloading

webpack-cli

CLI

Command-line interface for webpack

Learn Webpack: From Setup to Production in 5 Steps