Skip to main content

Webpack Setup and Execution

Webpack configuration files are typically named webpack.config.js and created in the project's root directory.

Basic Installation​

To install Webpack in your project, use the following command:

npm install webpack webpack-cli --save-dev

Basic Structure of webpack.config.js​

const path = require('path');

module.exports = {
  // Mode configuration (development, production, none)
  mode: 'development',
  
  // Entry point
  entry: './src/index.js',
  
  // Output configuration
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // Clean the output directory before emit
  },
};

Running with Scripts​

You can easily build your project by adding a Webpack run script to your package.json file:

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

Now, by running npm run build in your terminal, Webpack will read src/index.js and generate the resulting dist/bundle.js.