191108 webpack

WEBPACK

모듈 번들러로 쉽게 말해 최신화 되어 있는 코드를 호환이 되는 버전으로 변환시켜주는 역할을 한다.

1. WEBPACK 설치

npm install webpack webpack-cli 

• 웹팩을 설치하고 콘솔창에서 웹팩 실행할 수 있게 설치
• assets 폴더 > js 폴더 > main.js

import "../scss/styles.scss";

• assets 폴더 > scss 폴더 > styles.scss

body {
    background-color: red;
  }

2. 서버와 프론트 나눠서 실행시키기 위한 작업

package.json

...
  "scripts": {
    "dev:server": "nodemon --exec babel-node init.js --delay 2",
    "dev:assets": "webpack",
  },

webpack.config.js 파일을 생성

// 경로를 절대 경로로 만들어준다
const path = require("path");
// import path from "path"

const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");
// static 폴더를 만들어서 해당 파일을 넣는다
const OUTPUT_DIR = path.join(__dirname, "static");

const config = {
  entry: ENTRY_FILE,
  output: {
    path: OUTPUT_DIR,
    filename: "[name].js"
  },
};

module.exports = config;

• entry (어느 파일을 받아서) / output (어디로 보낼 것인지) 으로 나눈다

-> npm run dev:assets

3. scss를 읽지 못해 아래와 같은 에러가 뜬다 -> 웹팩에게 rules 설정하기

webpack.config.js

const path = require("path");
// import path from "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: ENTRY_FILE,
  mode: MODE,
  module: {
    rules:[
        {
            test: /\.(scss)$/,
            use: ExtractCSS.extract([
                {
                  loader: "css-loader"
                },
                {
                  loader: "postcss-loader",
                  options:{
                      plugins(){
                          return [autoprefixer({browsers:"cover 99.5%"})]
                      }
                  }
                },
                {
                  loader: "sass-loader"
                }
            ])
        }
    ]
  },
  output: {
    path: OUTPUT_DIR,
    filename: "[name].js"
  },
  // 추출을 해서 새로운 styles.css파일을 만든다
  plugins : [new ExtractCSS("styles.css")]
};

module.exports = config;

package.json (npm install cross-env)

  "scripts": {
    "dev:server": "nodemon --exec babel-node init.js --delay 2",
    "dev:assets": "cross-env WEBPACK_ENV=development webpack -w",
    "build:assets": "WEBPACK_ENV=production webpack"
  },

• loader를 부여해서 웹팩에게 파일 처리하는 방법을 알려준다.
• sass->css
  1. 확장자가 scss인 파일을 찾고
  2. scss->css로 바꾸고
  3. 그 css의 텍스트를 추출해서 파일로 만들기

npm install extract-text-webpack-plugin@next

• const ExtractCSS = require("extract-text-webpack-plugin"); 이 변수가 있기 때문에 css를 가지고 뭘 어떻게 할지 알려줄 수 있다.
• 웹팩의 config 파일은 아래에서 위로 진행한다.

npm install css-loader postcss-loader sass-loader

• postcss를 쓰면 autoprefixer를 통해 자동으로 브라우저마다 호환되는 css를 추가 기재해준다.

npm install autoprefixer

그리고 plugins : [new ExtractCSS("styles.css")] 통해 추출된 파일은

  output: {
    path: OUTPUT_DIR,
    filename: "[name].js"
  }

이 정보에 따라 이름이 주어지고 해당 폴더에 저장이 된다.