#4 - Webpack을 이용해 Styling하기

Webpack이란?

웹팩의 기본 개념

한 문장으로 말하면... 여러 개의 파일들을 합쳐주는 것!?

 

설치

npm i webpack webpack-cli (webpack-cli는 콘솔에서 webpack을 사용할 수 있게 해준다.)

 

설정

1. package.json 수정

  //package.json
  {
    "scripts": {
      "dev:server": "nodemon --exec babel-node init.js",
      //cross-env는 window가 WEBPACK_ENV는 변수라는 것을 알 수 있게해줌. (npm i cross-env)
      //-w(watch)는 nodemon과 같은 역할
      "dev:assets": "cross-env WEBPACK_ENV=development webpack -w",
      "build:assets": "cross-env WEBPACK_ENV=production webpack"
    },
  }

이제부터는 각자 다른 콘솔에서 아래와 같이 실행시켜줘야한다.

npm run dev:server

npm run dev:assets

 

 

2. webpack.config.js 파일 생성, assets/js/main.js, assets/scss/styles.scss 만들기

주의) ES5로 작성해야함

const path = require("path");
const extractCSS = require("extract-text-webpack-plugin");
const autoprefixer = require("autoprefixer");

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

const config = {
  entry: ["@babel/polyfill", ENTRY_FILE],
  mode: MODE,
  module: {
    rules: [
      {
        test: /\.(js)$/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
      },
      {
        test: /\.(scss)$/,
        use: extractCSS.extract([
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
            options: {
              plugins() {
                return [autoprefixer({ overrideBrowserslist: "cover 99.5%" })];
              },
            },
          },
          {
            loader: "sass-loader",
          },
        ]),
      },
    ],
  },
  output: {
    path: OUTPUT_FILE,
    filename: "[name].js",
  },
  plugins: [new extractCSS("styles.css")],
};

module.exports = config;

 

 

 

Styling

각자의 스타일로 꾸미기