Shivankur Sharma

  1. setup a new node.js project
    • create a new directory 
      mkdir webpack-project
cd webpack-project
  1. install webpack and dependencies 
    npm install --save-dev webpack webpack-cli webpack-dev-server

  2. create project structure webpack-project/ ├── src/ │ └── index.js ├── dist/ │ └── main.js ├── webpack.config.js └── package.json

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

module.exports = {
  entry: './src/index.js', // Entry point of the app
  output: {
    filename: 'main.js', // Output file name
    path: path.resolve(__dirname, 'dist'), // Output directory
  },
  mode: 'development',
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'), // Serve files from the 'dist' folder
    },
    open: true,  // Automatically open the browser
    port: 8080,
  },
};
  4. run server 
    npx webpack serve

This will start the Webpack Dev Server, which will: