Webpack

1. Webpack?

 

우선 웹팩이 무엇일까? 

위 이미지에서 보이는 것처럼 여러가지 얽힌 복잡한 파일들을 간단하게 만들어주고 있다. 

그래서 Webpack을 모듈 번들러라고 한다. 

 

즉, 여러 개로 나뉘어진 파일들을 묶어서 하나의 파일로 만들어준다. 

근데 이런 과정이 왜? 필요할까? 

 

웹 페이지는 다양한 html, js, css, png, ... 등 파일로 구성되어 있다. 

그말은 웹페이지가 구성되려면 많은 파일들을 요청해야 한다는 것이다. 

http/2 커넥션이라면 동시에 여러 파일을 요청할 수 있지만, 현재 많이 사용되고 있는 http/1.1에서는 

한번의 요청에 하나의 파일만 받을 수 있다. 

 

즉, 요청 해야하는 파일이 많아지면 그만큼 오래 기다려야해서 비효율적이다.

이러한 요청을 줄이기 위한 방법이 번들러이다. 

 

이제 모듈 번들러에서 번들러는 알게 되었다. 

다음으로 모듈은 무엇일까? 

 

자바스크립트가 계속 발전하면서 RequireJS, CommonJS, UMD 같은 JS 모듈 시스템이 만들어졌다. 

서로 다른 모듈들을 하나의 JS 파일로 합쳐주는 역할을 하는 것이 웹팩이다. 

 

2. Webpack 구동 방법

npm install --save-dev webpack webpack-cli

웹팩을 실행하는데 당연히 필요한 Webpack 패키지와 커맨드라인에서 사용하기 위해서 cli를 설치한다. 

 

const path = require("path");

module.exports = {
  mode: process.env.NODE_ENV,
  entry: "./src/javascripts/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

Webpack을 실행할 때 참조하는 설정 파일인 webpack.config.js 파일을 만들어준다. 

웹팩을 실행할 때 자동으로 해당 파일의 설정을 사용한다. 

 

mode 

mode는 3가지 설정이 있는데, development, production, none이 있다.

명칭만 봐도 딱 알겠지만 개발환경에선 development, 운영환경에서는 production을 사용한다. 

 

entry

번들링의 시작 경로를 지정하는 옵션이다. 

당연히 필요에따라 다른 경로를 설정할 수 있고, 다중 경로를 지정할 수 있다. 

 

output

번들링의 결과물이 저장되는 경로이다. 

path.resolve() 함수는 절대 경로의 주소를 받아와서 return해준다. 

 

loader 

웹팩이 웹 애플리케이션을 해석할 때 도와준다. 

따로 설정하지 않으면 css, png 등 파일을 읽을 수 없어서 필요에 맞는 패키지를 설치해서 

설정해야한다.