인프런 커뮤니티 질문&답변

TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable

문제 없어보이는데 계속 저 에러가 발생하네요

npm run build 만 입력하면 production이 아니니까 타야할거같은데 환경변수를 집어넣어주면 에러가 발생안하고 안넣어주면 에러가 발생합니다.

const path = require("path");

const webpack = require("webpack");
const childProcess = require("child_process");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isProduction = process.env.NODE_ENV === "production";
module.exports = {
  mode: "development",
  entry: {
    mainSrc: "./app.js",
  },
  output: {
    path: path.resolve("./dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: isProduction
          ? [MiniCssExtractPlugin.loader, "css-loader"]
          : ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: "asset/resource",
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: "/node_modules/",
      },
    ],
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: `
      Build Date : ${new Date().toLocaleString()}
      Commit Version : ${childProcess.execSync("git rev-parse --short HEAD")}
      Author  : ${childProcess.execSync("git config user.name")}
      `,
    }),
    new webpack.DefinePlugin({
      TWO: "1+1",
      TWO_STRING: JSON.stringify("1+1"),
      "api-domain": JSON.stringify("http://dev.api.domain.com"),
    }),

    new HtmlWebpackPlugin({
      template: "./src/index.html",
      templateParameters: {
        env: process.env.NODE_ENV === "development" ? "개발용" : "운영",
      },
      minify: process.env.NODE_ENV === "production" && {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),

    new CleanWebpackPlugin(),

    ...(process.env.NODE_ENV === "production" && [
      new MiniCssExtractPlugin({
        filename: "[name].css",
      }),
    ]),
  ],
};