앞으로 여기에다가 코딩하다가 열받을때 글을 찌꺼리기로 했다.[webpack css background-image problem]

아마 제일 글이 많이 올라오는 카테고리가 아닐까 싶다

 

오늘의 열받음.

 

오늘은 webpack 과 scss 관련해서 매우 열받았다.

홈화면에 배경을 추가하려고 background-image를 이용해서 url 로 이미지를 불러오려고 하는데

계속 안되는 것이다!!!

처음에는 이게 왜 안되는 걸까 싶어서 내가 뭘 잘못했나? 싶어서 이것저건 혼자서 머리싸매면서 고민하다가 

시간낭비인것 같아서 검색을 해보았는데 나랑 같은 문제로 질문한 사람들이 매우 많았다.!!

 

그래서 뭔가 그들을 보며 동료들을 발견한것마냥 기분이 조금 좋아지면서 여기에서 해답을 찾겠구나 싶은 생각이 들었다.

 

그런데 지금 2시간이 지났다.

진짜 웹팩.... 왜이렇게 어려운거야 ...

이놈의 웹팩은 볼때마다 어렵고 볼때마다 복잡하다 ㅡㅡ

 

언제까지 이걸 붙잡고 씨름할지 모르겠지만..... 계속 하다보면 해결되겠지....!!

 

레알 열받는 윂팩 config... 

const path = require("path");

const autoprefixer = require("autoprefixer");

const ExtractCSS = require("extract-text-webpack-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,

  module: {

    rules: [

      {

        test: /\.(js)$/,

        use: [

          {

            loader: "babel-loader"

          }

        ]

      },

      {

        test: /\.(png|svg|jpg|gif)$/,

        use: ["file-loader"]

      },

      {

        test: /\.(scss)$/,

        use: ExtractCSS.extract([

          {

            loader: "css-loader"

          },

          {

            loader: "postcss-loader",

            options: {

              plugins: () => {

                return [autoprefixer({ Browserslist: "cover 99.5%" })];

              }

            }

          },

          {

            loader: "sass-loader"

          }

        ])

      }

    ]

  },

  output: {

    path: OUTPUT_DIR,

    publicPath: "/",

    filename: "[name].js"

  },

  plugins: [new ExtractCSS("styles.css")]

};

 

module.exports = config;