강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của maantano4253
maantano4253

câu hỏi đã được viết

Tìm hiểu và thực hành về môi trường phát triển frontend (webpack, babel, eslint..)

Sử dụng Babel và tích hợp webpack

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

Viết

·

291

2

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",
      }),
    ]),
  ],
};

 

node.js웹팩babeleslint

Câu trả lời 1

0

jeonghwan님의 프로필 이미지
jeonghwan
Người chia sẻ kiến thức

코드 맨 아래 플러그인 지정하는 부분에서 발생한 원인이네요.

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

첫 번째 표현식이 false 이기 때문에 전체 문장은 false가 될 겁니다. [...false] 로 평가되어 불리언 타입에 나머지 연산을 시도하다가 TypeError 가 발생했을 것 같아요.

삼항 연산자로 한 번 바꿔보시겠습니까?

    ...(mode === "production"
      ? [new MiniCssExtractPlugin({ filename: `[name].css` })]
      : [])

 

Hình ảnh hồ sơ của maantano4253
maantano4253

câu hỏi đã được viết

Đặt câu hỏi