webpack > scss build failed

작업물 : 노마드코더 > 유튜브 클론 > webpack 강의

에러 키워드 : module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js):

 

원인 : webpack 4는 extract-text-webpack-plugin 사용할 수 없으므로 mini-css-extract-plugin 사용하여야 한다

 

:warning: Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

:warning: For webpack v1, see the README in the webpack-1 branch.

출처: https://webpack.js.org/plugins/extract-text-webpack-plugin/ 

webpack

webpack.config.js

const path = require("path");
// import path from "path"
//const autoprefixer = require("autoprefixer");
//const ExtractCSS = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const MODE = process.env.WEBPACK_ENV;
const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");
const OUTPUT_DIR = path.join(__dirname, "static");

const config = {
  entry: ["@babel/polyfill", ENTRY_FILE],
  mode: MODE,
  output: {
    path: OUTPUT_DIR,
    filename: "[name].js",
    publicPath: "/static/react/dist/"
  },
  stats: {
      entrypoints: false,
      children: false
  },
  plugins: [
      new MiniCssExtractPlugin({
        filename: "styles.css",
      })
  ],
  module: {
    rules: [
          {
            test: /\.(js)$/,
            use:[
                {
                    loader:"babel-loader"
                }
            ]
        },
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
          ]
        }
      ]
  },
};

module.exports = config;

 

그래서 mini-css-extract-plugin 으로 바꿨는데 웹팩이 또 .scss를 빌드하지 못했다는 에러가 떴다

 

 

npm install webpack@4.36

npm rebuild node-sass

 

웹팩을 다시 설치하고 sass를 재빌드하니 구동.