Skip to main content

How do you set up Webpack to run for development?

Frontend ToolsJunior~1 min read
Suggest an edit

To set up Webpack for development, you need to enable development mode, add a dev server, and add a start command to package.json.

1. Install Webpack and the dev server

bash
npm install webpack webpack-cli webpack-dev-server --save-dev

2. Set up webpack.config.js

Minimal configuration for development:

js
const path = require('path'); module.exports = { mode: 'development', // development mode entry: './src/index.js', // entry point output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devtool: 'source-map', // convenient debugging devServer: { static: path.resolve(__dirname, 'dist'), // serve files from dist port: 3000, // any port hot: true, // HMR - update without reloading open: true, // auto-open the browser }, };

What this configuration enables:

OptionWhy
mode: "development"disables minification, speeds up the build
devtool: "source-map"source code in the browser for debugging
devServerauto-reload, local server, HMR

3. Add a command to package.json

json
"scripts": { "start": "webpack serve --config webpack.config.js" }

Now you can run:

bash
npm start

What we end up with

After starting:

  • the project is automatically built by Webpack
  • a local server is started
  • the page reloads on every file change
  • Hot Module Replacement works (if loaders for styles and React are configured

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit