ERROR in ./src/main.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

이슈

ERROR in ./src/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

프로젝트 환경

1. node.js: 14.20.1
2. mini-css-extract-plugin: "^2.7.5"
3. webpack: "^5.80.0",

🔍원인

main의 css가 커짐에 따라 작은 용량으로 나누기 위해 mini-css-extract-plugin을 사용하려고 하였습니다. 번들링 된 파일 중 css 파일을 모듈화 시켜주는 로더가 없어서 발생한 이슈였습니다.

💊해결방법

[AS-IS]

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader],
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        loader: "url-loader",
        options: {
          name: "[name].[ext]?[hash]",
          limit: 10000, // 10Kb
        },
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin({ filename: `[name].css` })],

[TO-BE]

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        loader: "url-loader",
        options: {
          name: "[name].[ext]?[hash]",
          limit: 10000, // 10Kb
        },
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin({ filename: `[name].css` })],

MiniCssExtractPlugin.loader는 css를 모듈로 변환시켜주는 기능은 없습니다.
MiniCssExtractPlugin.loader는 split된 css 모듈을 돔에 추가해 주는 역할만 하기 때문에 css를 모듈로 변환 시켜주는 로더가 없어서 발생한 이슈였습니다.

그래서 css를 모듈로 변환해 줄 수 있는 css-loader를 추가해 줘서 해결했습니다.

추가로 MiniCssExtractPlugin.loader와 같이 css 모듈을 돔에 추가해 주는 style-loader이라는 로더가 있습니다. 이 둘은 같은 역할을 하기 때문에 하나만 사용하여야 합니다.

각 로더의 특징들이 있는데 이 부분은 다른 포스트에서 자세히 다뤄보겠습니다.

참고

https://yamoo9.gitbook.io/webpack/webpack/webpack-plugins/extract-css-files