webpackreact.md

webpack.config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = (env) => {
  const { production } = env ? env : { production: false };

  const main = {
    mode: "production",
    entry: "./src/index.jsx",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "build"),
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.m?\js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: [
                ["@babel/plugin-proposal-class-properties", { loose: true }],
                "@babel/plugin-transform-runtime",
              ],
            },
          },
        },
        {
          test: /\.s[ac]ss$/i,
          use: ["style-loader", "css-loader", "sass-loader"],
        },
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: "My React Project",
        template: "./src/index.html",
      }),
    ],
    output: {
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "build"),
    },
    optimization: {
      splitChunks: {
        chunks: "all",
      },
    },
  };

  const dev = {
    output: {
      filename: "dev.js",
      path: path.resolve(__dirname, "dev"),
    },
    mode: "development",
    devtool: "inline-source-map",
    devServer: {
      contentBase: "./dev",
      port: process.env.PORT,
    },
  };

  return production ? main : { ...main, ...dev };
};

package.json scripts

  "scripts": {
    "watch": "webpack --watch",
    "dev": "cross-env PORT=4000 webpack-dev-server --open",
    "build": "webpack --env.production"
  },