Setting up Webpack for both Development and Production Environments

Setting up Webpack for both development and production environments involves creating separate configurations for each environment to optimize the build process accordingly. Here's how you can set up Webpack for development and production:

Development Configuration

In the development configuration, the focus is on providing a fast and developer-friendly experience with features like source maps, hot module replacement (HMR), and a development server with live reloading.

// webpack.config.dev.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
  },
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
    hot: true,
    port: 8080,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

Production Configuration

In the production configuration, the focus shifts to optimizing the build for performance, minimizing bundle size, and ensuring compatibility across different browsers. This often involves techniques like code splitting, minification, and tree shaking.

// webpack.config.prod.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true,
      },
    }),
  ],
};

Usage

You can run Webpack using the provided configurations based on the environment:

# For development
webpack --config webpack.config.dev.js

# For production
webpack --config webpack.config.prod.js

Alternatively, you can set up npm scripts to simplify running Webpack commands:

{
  "scripts": {
    "build:dev": "webpack --config webpack.config.dev.js",
    "build:prod": "webpack --config webpack.config.prod.js"
  }
}

Then you can run npm run build:dev for development builds and npm run build:prod for production builds.

Conclusion

Setting up separate Webpack configurations for development and production allows you to optimize your build process for each environment. Development configurations prioritize speed and developer experience, while production configurations focus on performance and bundle size optimization. By using appropriate configurations, you can streamline your development workflow and ensure optimal performance in production.