📃Webpack이란?

웹팩은 기본적으로 'module bundler' 이다.
우리가 수많은 파일들을 webpack 에게 주면, 그것들을 완전히 호환되는 static 파일들로 변환해 준다. 예를 들어서 ES6,SASS를 webpack에게 주면 webpack은 일반적인 css와 노멀한 ES5로(브라우저가 이해 가능하도록) 변경해 준다.

📃웹팩 기본 설정

$ webpack install webpack webpack-cil

//webpack:webpack을 사용
//wepack-cil: 터미널에서 webpack을 사용

📎 webpack.config.js

webpack에게 어떤식으로 설정해야 하는지 알려주는 webpack.config.js 파일을 생성해준다.

이 파일은 100% client code 로,앞에서 작업했던거와 같이 babel을 사용하지 못하고 옛버전의 javascript를 사용해야 한다.ex)아래의 import를 사용할 수없는것이 예이다.

config파일을 export 해준다. 

//webpack.config.js
const path = require("path");
//import path from "path" 와 같음 모던 자바스크립트 파일이 아니라서 import를 쓸 수 없음.

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

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

module.exports = config;

script 수정
webpack을 사용하기 위해서는 package.json 파일의 script부분을 수정해 준다.
해당 부분을 수정하면 npm start가 아닌 npm run dev:server ,npm run:assets로 (각자 다른 콘솔에서 실행) webpack 사용이 가능하다.

dev:assets : webpack을 불러옴,webpack은 기본적으로 webpack.config.js 파일을 찾는다. 해당 파일에는 webpack 관련 환경설정이 들어있다.

//packge.json
 "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"
  },
  

📎 entry

webpack의 기본 개념 중 entry와 output, loader에 대해 정리해 봤다.

entry: 파일들이 어디서 오는지 webpack의 시작점(src/main.js).

//webpack.config.js
const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");
//entry 파일이 오는곳,작업하는 곳 이곳의 js, SASS 파일들이 변환 된다

const config = {
  entry: ["@babel/polyfill", ENTRY_FILE], 
}

📎 output

output: 그 파일들(번들된 결과물들을 처리할 위치)을 어디에 넣는지.
webpack을 실행하면 static 폴더에 [name].js 파일이 생성된다.

//webpack.config.js
const OUTPUT_DIR = path.join(__dirname, "static");
...
const config ={
	
  output: {
     path: OUTPUT_DIR,
     filename: "[name].js",
   },
 }
 ...

📎 babel-loader

$ npm install sass-loader@7.1
$ npm install css-loader@1.0.1

loader란 기본적으로, webpack에게 파일을 처리하는 방법을 알려준다.
웹팩은 모든 파일들 자바스크립트뿐 아니라 이미지, 스타일파일 까지 모듈로 관리한다 . 그러나 웹팩은 자바스크립트 밖에 모른다 .자바스크립트가 아닌 파일 처리하는 방법을 알려주는 역할을 로더가 한다. 아래의 코드예는 ES6에서 ES5로 변환할때 바벨을 사용하는 예이다.

//webpack.config.js
const config = {
module: {
    rules: [
      {
        test: /\.(js)$/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
      },
}
module.exports = config;

📎 scss-loader

sass를 css로 변경하기 위해서는 웹팩은 1. scss파일을 찾아서 css로 변경 2. 텍스트로 추출해서 3. 분리된 하나의 파일로 하는 과정을 해야한다.

웹팩은 config 파일에서 아래에서 위로 실행한다.
sass-loader는 sass파일을 css로 옮겨주고 , postcss-loader는 특정 plugin들을 css에 대해 실행,css-loader는 css를 가져오고 Extractcss로 그 부분만 추출하여 css파일을 자바스크립트로 변환해서 load 해준다.

//webpack.config.js
const config = {
module: {
    rules: [
      {
        test: /\.(scss)$/, //정규 표현식scss인 파일 다 찾음
        use: ExtractCSS.extract([
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins() {
                  return [autoprefixer({ browsers: "cover 99.5%" })];
                },
              },
            },
          },
          {
            loader: "sass-loader",
          },
        ]),
      },
}
module.exports = config;

📃 마무리

설치할때 오류가 많이나서 설치 과정을 정리를 못한게 아쉽다. 이것저것 오류나서 댓글, 구글 찾아보면서 다운로드 했더니 오류가 없어졌다 ..?

웹팩에서 모든것은 모듈이다.

처음 접했을때는 엄청 복잡해 보였는데 entry가 있고 mode(development 혹은 production)있고 rules ,loader ,output 가있고 loader로는 어떤 loader가 쓰였는지 정도의 전체적인 개념을 알면 좋다는 말에 전체적인 개념을 한번 정리 해 봤다.

참고
https://jeonghwan-kim.github.io/js/2017/05/15/webpack.html
https://velog.io/@hih0327/Webpack-%EA%B8%B0%EC%B4%88