[webpack] 웹팩을 이용한 모듈 관리 - 기본

웹팩(Webpack)이란

웹팩은 모듈 번들러(module bundler)이다.

웹팩을 통한 빌드가 수행되면, 프로그램의 시작 지점인 entry point부터 시작하여

의존하는 모듈들을 읽어내려가 하나의 파일로 묶는(bundle)다.

모듈화의 대상은 Web Application을 구성하는 요소로, html, css, js, image file(JPG, PNG) 등이 이에 해당한다.

 

웹팩을 사용하는 이유?

웹팩을 사용하는 대표적인 이유는 다음의 세 가지이다.

1. 자바스크립트의 전역 공간 공유로 인해 발생하는 문제를 --> 모듈화, 모듈 번들링을 통해 해결

2. 요소(html, css, js, image)의 압축과 전처리와 같은, 반복 작업의 자동화

3. 성능 향상 (웹팩은 자원이 필요한 순간에만 요청한다.)

 

---

웹팩 사용하기

 

1. 설치 및 기본 세팅

 

먼저 webpack을 사용하기 위해서는 npm을 통해 다운받아야 한다.

webpack과 webpack을 커맨드 라인에서 다룰 수 있는 webpack-cli를 개발 의존성으로 설치한다.

npm install -D webpack webpack-cli

그 후 웹팩의 다양한 옵션을 지정하는 webpack.config.js 파일을 생성한다.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/app.js", // 웹팩의 시작 지점
  output: { // 결과물이 저장될 위치를 지정
    path: path.resolve("./dist"),
    filename: "[name].js", // entry point의 파일명과 동일한 파일이 생성
  },
  module: {
    rules: [ // 어떤 파일에 어떤 로더를 적용할지 객체가 담긴 Array로 구성
      {
        test: /\.js$/, // 이에 해당하는 파일들에
        use: "babel-loader", // 지정한 'loader'를 사용하며
        exclude: /node_modules/, // 그 중 이것에 해당하는 파일들은 제외한다.
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin(),
  ]
};

entry

웹팩의 최초 진입점이 될 js 파일. 해당 파일을 기점으로 빌드가 수행된다.

multi page application의 경우, entry point를 여러 개 지정하기도 한다.

 

output

빌드 산출물에 대한 정보를 담은 객체.

저장 경로(path)와 파일명(filename)으로 이루어져 있다.

 

loader

모듈 빌드 시 특정 파일에 적용되어 변환을 일으키는 속성.

module 객체의 rules 속성 내 Array에 추가되며,

어떤 파일에 적용할지를 나타내는 test,

어떤 loader를 적용할지 나타내는 use,

test에 해당하는 파일 중 제외할 파일을 추가하는 exclude 등으로 이루어진 객체 형태를 가진다.

자주 사용되는 loader로는 babel-loader, style-loader, css-loader 등이 있다.

loader의 적용 순서는 왼쪽에서 오른쪽의 순서이다.

 

plugin

webpack에 추가적인 기능을 제공하는 속성. new 형식으로 선언된다.

경우에 따라 상단에서 require를 통한 import를 해줘야 하는 플러그인도 있다.

 

 

 

이 사이트에 웹팩의 개념에 대한 정리가 간단명료하게 되어 있다.

joshua1988.github.io/webpack-guide/concepts/wrapup.html#concepts-review

Wrap Up | 웹팩 핸드북

 

 

 

2. 실행 및 적용

 

npx webpack

다음 명령어를 (config file이 존재하는 디렉토리에서) 실행하면 빌드가 수행되어 지정한 디렉토리(dist/)에 번들링 결과 파일이 생긴다.

이 파일을 html에 추가함으로써 entry point file과 이에 의존하고 있는 js 파일들에 명시된 내용을 사용할 수 있다.