Share Common Configuration between Development and Production

To share common configuration settings between development and production environments in Webpack, you can create a base configuration file and merge it with environment-specific configurations using the webpack-merge plugin. Here's how you can do it:

1. Install webpack-merge:

npm install webpack-merge --save-dev

2. Create a Base Configuration File:

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

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

3. Create Environment-Specific Configuration Files:

// webpack.config.dev.js
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base.js");

module.exports = merge(baseConfig, {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
    hot: true,
    port: 8080,
  },
});

// webpack.config.prod.js
const { merge } = require("webpack-merge");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const baseConfig = require("./webpack.config.base.js");

module.exports = merge(baseConfig, {
  mode: "production",
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [new CleanWebpackPlugin()],
});

4. Usage:

You can now run Webpack using the environment-specific configuration files:

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

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

Or, you can set up npm scripts as before:

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

Conclusion

By creating a base configuration file and merging it with environment-specific configurations using webpack-merge, you can share common settings between development and production environments in Webpack. This approach helps maintain consistency and reduces duplication in your Webpack configuration files.