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

안녕하세요, 원인을 도저히 모르겠어서 질문 남깁니다.

mode를 production으로 했을 때만 아래 사진처럼 에러가 나는데요, 코드상에 문제가 있는지 한번 봐주실 수 있을까요?

mode=development에서는 보시다시피 잘 나옵니다.

아래는 소스코드입니다.

package.json

{
  "name": "lecture-frontend-dev-env",
  "version": "1.0.0",
  "description": "\"프론트엔드 개발 환경의 이해\" 강의 자료입니다.",
  "main": ".eslintrc.js",
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.7.2",
    "sass": "^1.58.3",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "scripts": {
    "dev": "webpack --mode=development --config webpack.config.js",
    "build": "webpack --mode=production --config webpack.config.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jeonghwan-kim/lecture-frontend-dev-env.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jeonghwan-kim/lecture-frontend-dev-env/issues"
  },
  "homepage": "https://github.com/jeonghwan-kim/lecture-frontend-dev-env#readme",
  "dependencies": {
    "core-js": "^3.29.0"
  }
}

webpack.config.js

const path = require("path");
const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env, argv) => {
  const title = argv.mode === "development" ? "(개발용)" : "";
  return {
    entry: {
      main: "./src/app.js",
    },
    output: {
      filename: "[name].js",
      path: path.resolve(__dirname, "dist"),
      clean: true,
    },
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: "asset",
          parser: {
            dataUrlCondition: {
              maxSize: 20 * 1024, // 20kb
            },
          },
          generator: {
            publicPath: "../dist/",
          },
        },
        {
          test: /\.js$/i,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: { configFile: path.resolve(__dirname, "babel.config.js") },
          },
        },
      ],
    },
    plugins: [
      new webpack.BannerPlugin({
        banner: `빌드 날짜: ${new Date().toLocaleString()}`,
      }),
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        templateParameters: { env: title },
      }),
      new MiniCssExtractPlugin(),
    ],
  };
};

babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: { ie: 11 },
        useBuiltIns: "usage",
        corejs: 3,
      },
    ],
  ],
};

다른 폴더 및 파일은 건드리지 않았습니다.