Webpack Getting Started: First Config and Build (2026)

Webpack’s magic isn’t just bundling; it’s about transforming your entire JavaScript ecosystem into something browsers can actually understand, and doing it efficiently.

Let’s get this done. We’ll set up a minimal Webpack project to bundle a simple JavaScript file.

First, make sure you have Node.js and npm installed. Then, create a new project directory and navigate into it:

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

Now, install Webpack and its command-line interface:

npm install webpack webpack-cli --save-dev

Create a source directory for your JavaScript files and a file named index.js inside it:

mkdir src
touch src/index.js

Add some basic JavaScript to src/index.js:

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

Next, we need a configuration file for Webpack. Create a file named webpack.config.js in the root of your project:

touch webpack.config.js

Here’s the simplest Webpack configuration to get us started:

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

module.exports = {
  entry: './src/index.js', // The entry point for Webpack
  output: {
    filename: 'bundle.js', // The name of the output bundle file
    path: path.resolve(__dirname, 'dist'), // The output directory
  },
  mode: 'development', // Set the mode to 'development' or 'production'
};

Let’s break this down:

entry: This tells Webpack where to start building its dependency graph. It’s the main JavaScript file that Webpack will process.
output: This tells Webpack where to emit the bundled files.
- filename: Specifies the name of the output bundle.
- path: An absolute path to the directory where the bundle should be saved. path.resolve(__dirname, 'dist') creates an absolute path to a dist directory in your project’s root.
mode: This is crucial. Webpack has built-in optimizations for different environments.
- 'development': Enables useful debugging features and keeps the bundle size smaller by not applying production optimizations.
- 'production': Minifies and optimizes the code for faster loading and execution in a live environment.

Now, to make running Webpack easier, let’s add a script to your package.json file. Open package.json and find the "scripts" section. Add the following line:

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

This tells npm that when you run npm run build, it should execute the webpack command.

You can now run the build:

npm run build

After running this command, you’ll see a new directory named dist created in your project root, and inside it, a bundle.js file.

To see this in action, create an index.html file in your project root:

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

Open index.html in your browser. You should see "Hello from Webpack!" logged in the browser’s developer console.

The real power of Webpack, however, comes when you start importing other modules. Let’s add another file, src/another.js:

// src/another.js
export function greet(name) {
  return `Hello, ${name}!`;
}

And modify src/index.js to import and use it:

// src/index.js
import { greet } from './another.js';

console.log(greet('Webpack User'));

Now, run npm run build again. Webpack will detect the import statement and include another.js in the bundle.js. Open index.html in your browser again. You’ll see "Hello, Webpack User!" in the console. This demonstrates Webpack’s core capability: tracing dependencies and bundling them into a single file.

When you set mode: 'development', Webpack doesn’t perform extensive optimizations. If you change mode: 'development' to mode: 'production', run npm run build, and then inspect dist/bundle.js, you’ll notice it’s significantly smaller and harder to read because Webpack has minified and uglified the code. This is essential for faster load times in production environments.

The mental model to hold onto is that Webpack is a module bundler, but it’s also a module transformer. It takes your code, understands its dependencies, and then uses "loaders" and "plugins" to transform various types of assets (JavaScript, CSS, images, etc.) into formats that browsers can consume, all while optimizing for performance.

What most people don’t realize is that Webpack treats everything as a module, not just JavaScript. When you import image from './logo.png', Webpack, with the right configuration (loaders), can process that image file, potentially optimize it, and embed it into your bundle or copy it to your output directory, giving you a URL to use in your HTML or CSS.

The next thing you’ll invariably run into is managing CSS, which Webpack doesn’t handle out-of-the-box without specific loaders.

More Deep Dives in Webpack