번들링과 웹팩

번들링이란?

더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하는 작업

빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업, 모듈 간의 의존성 관계를 파악해 그룹화하는 작업이다.

의존성 관계란 파일이 서로 엮여있는지를 말하는 것이다. 

보통 다른 파일에서도 그 파일을 쓰기 위해 module.exports를 쓰고 파일을 불러올 때에는 require을 쓴다. (commonJS)

=> ES6 문법에서는 import, export를 쓴다.

 

웹팩 webpack

프론트엔드 애플리케이션 배포를 위해 사용하는 번들러

최근 5년간 사용량 추세를 보면 압도적으로 높은 점유율을 차지하고 있다.

webpack

 

웹팩을 이용하면 같은 타입의 파일은 묶어서 요청이 가능하기 때문에 네트워크 통신이 오고가는 횟수가 획기적으로 줄어든다. 

 

핵심 개념들은 다음과 같다. 

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

웹팩 파일의 내용은 webpack.config.js에 작성한다.

웹팩 설치 시 자동으로 생성되지 않으므로 직접 만들어야 한다! 

 

웹팩을 설치하려면 파일 디렉토리에서 아래와 같은 명령어를 실행하면 된다.

npm install -D webpack webpack-cli

 

웹팩 설치 후 빌드 작업을 수행하려면 npx webpack을 입력하면 되지만, package.json 파일에 스크립트를 추가하여 npm run build 명령어로도 가능하게 할 수 있다.

 

Entry

module.exports = {
  ...
  entry: "./src/index.js",
};

웹팩에게 코드의 시작점을 알려주는 역할을 한다.

 

Output

const path = require("path");

module.exports = {
 ...
 output: {
   path: path.resolve(__dirname, "docs"),
   filename: "app.bundle.js",
   clean: true
 },
}

생성된 번들 파일을 내보낼 위치와 파일의 이름을 지정하는 부분이다.

위 코드에서는 번들 파일이 'app.bundle.js'라는 이름으로 생성되며, docs라는 폴더에 저장된다.

기본값은 ./dist/main.js이다. 기타 파일은 ./dist 폴더로 저장된다. 

 

Loader

  module: {
    ...
    rules: [
      {
        // css 파일에만 적용
        test: /\.css$/,
        // css-loader가 실행되고 나서 style-loader가 실행되어야 한다!
        use: ["style-loader", "css-loader"],
        // node_modules 폴더는 제외
        exclude: /node_modules/,
      },
    ],
  },

다른 유형의 파일을 처리하거나 이를 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가 가능하다.

웹팩은 자바스크립트 파일과 json 형식의 파일만 인식하므로 css 파일의 처리가 필요할 때 로더를 사용할 수 있다. 

css 파일을 처리하는 로더에는 css-loader과 style-loader가 있다. 

css-loader는 css 파일을 처리해주는 로더이고, style-loader는 css 코드가 html 파일에 인라인으로 추가되길 원할 때 쓰는 로더이다.

`use`에 쓰인 로더들은 오른쪽부터 적용되기 때문에 순서에 유의해야 한다.

 

test로 적용할 파일들을 정규표현식으로 지정해줄 수 있고, use로 쓸 로더들을 불러온다.

exclude에는 로더 적용을 제외할 파일이나 폴더를 지정한다. 

test와 use는 필수적으로 적용해야 하는 옵션이다. 

 

css-loader와 style-loader 설치하기

npm i -D css-loader style-loader

 

Plugins

번들링 과정 중 개발자가 원하는 작업을 할 수 있도록 도와준다. 

`html-webpack-plugin`을 쓴다면 `webpack.config.js` 파일에 아래처럼 작성해줄 수 있다. 

`html-webpack-plugin`은 웹팩으로 빌드한 결과물을 가지고 `html`파일을 생성해주는 플러그인이다.

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

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
};

 

html-webpack-plugin 설치

npm i -D html-webpack-plugin