[🙌 에러해결하기] Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js):TypeError: text.forEach is not a function

 

 

 

웹팩을 자유자재로 활용하기 위해 노력하고 있다만, 역시 오늘도 사투를 벌였다.

---

👊 내가 하려던 것 :

 

extract-text-webpack-plugin을 사용하여 수많은 scss를 단 하나의 styles.css로 압축시키기

 

그런데 이 포스팅의 제목과 같은 에러가 떴다.

 

내가 오타를 낸건지, 다른 라이브러리 버전을 잘못받은건지 한참 동안 디버깅했다.

 

그러다가 제작자 깃헙 레포에서 원인을 발견했다(진작 제작자의 충고를 들을걸)

---

❗️ 원인 :

 

extract-text-webpack-plugin은 css 용으로 쓰여서는 안되므로, mini-css-extract-plugin을 사용해야 했던 것이다.

애초에 scss -> css 용도가 아니다

---

💖 해결 :

 

기존에 쓰던 extract~를 mini~로 변경했고, 다음과 같이 webpack.config.js를 수정했다.

 

const config = {
  entry: ["@babel/polyfill", ENTRY_FILE],
  mode: mode,
  module: {
    rules: [
      // Rules for ES6 -> JS
      {
        test: /\.(js)$/,
        use: [
          {
            loader: "babel-loader",
          },
          {
            loader: "ify-loader",
          },
        ],
      },
      // Rules for SCSS -> CSS
      {
        test: /\.(scss)$/, // webpack이 scss 파일을 찾도록 한다. scss 파일에 한해 config 적용시킨다
        use: [
          {
            loader: extractCSS.loader,
          },
          {
            loader: "css-loader", // webpack이 css를 이해할 수 있도록 가르쳐준다. 여기서 추출된 순수 css를 가지고 전송한다.
          },
          {
            loader: "postcss-loader",
            options: {
              plugins() {
                return [autoprefixer({ browsers: "cover 99.5%" })];
              },
            },
            // 호환성 부여(autop)
          },
          {
            loader: "sass-loader",
          },
        ],
      },
    ],
  },
  output: {
    path: OUTPUT_DIR,
    filename: "[name].js",
  },
  plugins: [new extractCSS({ filename: "styles.css" })],
};