webpack (1)

webpack 에 대해서 여태까지 어설프게만 알고 있었는데

이참에 한번 제대로 싹 정리를 해보고

개념도 확실하게 익힐겸 포스팅을 작성하게 되었다.

 

 

 

* Module

JS 를 사용해서 개발을 하다보면 module 이란 용어를 듣게 된다.

JS 에서 module 이란 각각의 개별 파일을 말하는 것이다.

 

module 단위로 JS 를 관리하다 보면, 생기는 문제 중 하나가 

JS 파일에 정의된 변수명이 겹칠 수 있다는 것이다.

 

이런 문제를 해결하기 위해 등장한것이 

ES6 이후 등장한 import, export 구문이다.

 

* Bundle

bundle 은 영어로 묶는다는 뜻이다. 

webpack 의 정의를 보면, 

"webpack is a static module bundler for modern JavaScript applications" 라고 되어 있다.

 

웹의 개발 규모가 커지면 자연스레 작성하고 관리해야할 파일이 많아지는데,

이런 파일들을 일일이 다 받아오면, 받아오는 사용자 입장에서는 페이지 로딩 시간이 길어지고,

서버 입장에서는, 전송해줘야할 파일이 많아져서 서버 성능에도 영향을 줄 수 있다.

 

그래서 webpack 은 이런 다수의 파일들을 하나로 묶는(bundle) 역할을 하는 bundler 역할을 담당한다.

 

 

* Webpack Core Concepts

 

Webpack 을 이해하려면 몇가지 핵심 개념을 익히고 가야한다.

 

-1) Entry

Webpack 은 앞서 언급했듯 module bundler 라 하였는데, 각각의 module 을 묶어서 번들링할때, 의존성 그래프 라는 것을 만든다. 이 의존성 그래프의 시작점이 바로 Entry 이다.

가장 기본적인 Entry 설정 방식은 아래 같은 형식으로 작성한다

 

- webpack.config.js

module.exports = {
    Entry: {
        main: "./src/main.js"
    }
}

이렇게 작성하면 앞으로 이 웹팩을 사용하는 프로젝트 내의 모든 js 파일의 시작점은

main.js 가 된다.

 

 

-2) Output

Output 은 단어에서 유추가능하듯, 웹팩 번들링에 대한 결과물이 위치할 곳을 지정하는 값이다.

아래와 같은 형식으로 코드를 작성하며, 

path 는 번들링의 결과물이 담길 파일을 지정하는 것이고,

filename 은 번들링의 결과물이될 파일의 이름을 지정한 것이다.

 

- webpack.config.js

module.exports = { 
  output: {
        path: "./dist",
        filename: "bundle.js",
  },
}

 

 

 

이를 html 에서 불러오고자 한다면, 아래 같이 작성해야 한다.

<script src="./dist/bundle.js"></script>

 

 

 

-3) loader

기본적으로 웹팩은 자바스크립트만 이해할 수 있다.

웹 리소스에 해당하는 다른 요소들 (이미지, 폰트, 스타일시트 등) 은 웹팩이 이해하지 못한다.

이 요소들을 이해시키기 위해서 필요한게 로더 이다.

로더를 설정할때는, test, use 라는 키값으로 구성된 객체를 선언해야 하며,

test 는 로드할 파일을 정규표현식으로 지정해야하며,

use 는 이 파일에 적용할 로더를 지정해야 한다.

 

대표적인 로더를 몇가지 살펴보면,

(1). babel-loader

: babel 은 ES6 코드를 ES5 로 바꾸는 패키지이다. 이 로더는 아래 같은 형식으로 작성이 가능하다.

 

- webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
}

 

 

(2). css-loader, style-loader

: css 파일을 웹팩에게 이해시키기 위한 css-loader 와 css-loader 를 통해서 css 파일들을 번들링하여 만든 js 파일을 DOM 에 동적으로 할당하기 위한 로더가 style-loader 이다. DOM 에 할당되어야만 브라우저가 해석이 가능하다.

 

-webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["css-loader", "style-loader"]
      },
    ],
  },
}

 

 

-4) Plugin

플러그인은 이미 번들링된 결과물에 대해서 처리작업을 해주는 역할을 한다

특정 텍스트를 추출한다던가, 번들링 된 자바스크립트 파일을 난독화 한다던가 하는 용도로 쓴다.

 

대표적인 것 몇개만 보면,

(1). ExtractTextPlugin

: 이 플러그인은, 텍스트를 추출해서 파일로 만드는 플러그인이다.

이 플러그인은 보통, sass 파일, css 파일을 하나의 bundle.js 에 번들링해서 결과물을 내지 않고,

따로 style.css 파일로 만들기 위한 용도로 쓰였다.

프로젝트의 규모가 커지고, sass, css 파일이 매우 커지면 하나의 bundle.js 에 담는 것 보다 bundle.js, style.css 로 나눠서 하는게 나을 수 도 있기 때문이다.

그러나, 이 플러그인은 현재 deprecated 되고, mini-css-extract-plugin 이라는 이름으로 대체되었다.

(텍스트를 추출하는 큰 범위보다 css 로 축소해서 경량화 하려고 바뀐것 같다)

 

css 와 sass 를 사용하는 경우 아래 같은 코드로 작성할 수 있다.

 

- webpack.config.js

module.exports = {
  plugins: [new MiniCssExtractPlugin({ filename: "style.css" })],
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
};

 

 

 

다음 포스팅은 웹팩 개발 서버에 대해서 알아본다.

 

 

 

- Reference

https://ko.javascript.info/modules-intro

https://www.opentutorials.org/module/4566

https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html

github.com/webpack-contrib/mini-css-extract-plugin