자주 사용하는 웹팩 플러그인

제이든·2022년 1월 7일
0

웹팩

목록 보기
5/5
post-thumbnail

지난 챕터에서 웹팩 플러그인에 대해 알아보았다. 플러그인은 번들링이 끝나고 난 결과 파일에 대한 후속 처리를 해주는 기능을한다.
하지만 직접 작성할 일은 거의 없다고 했다. 자주 사용되는 플러그인을 알아보자 📌

1. BannerPlugin

웹팩이 기본으로 제공하는 플러그인으로 결과물에 빌드 정보나 커밋 버전같은 걸 추가할 수 있다.

생성자 함수에 전달하는 옵션 객체의 banner 속성에 문자열을 전달한다. 웹팩 컴파일 타임에 얻을 수 있는 정보, 빌드 시간, 커밋정보를 전달하기 위해 함수를 전달할 수 도 있다.

webpack.config.js:

const webpack = require('webpack');
const childProcess = require('child_process');

module.exports = {
  plugins: [
    new webpack.BannerPlugin({
      banner: `
        Build Date : ${new Date().toLocaleDateString()}
        Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
        Author: ${childProcess.execSync('git config user.name')}
      `,
    }),
  ],
};

이렇게 정보에 관한 배너가 찍히는 걸 볼 수 있다.

2. DefinePlugin

어플리케이션은 개발환경과 운영환경으로 나눠서 운영한다. 가령 환경에 따라 API 서버 주소가 다를 수 있다.

같은 소스 코드를 두 환경에 배포하기 위해서는 이러한 환경 의존적인 정보를 소스가 아닌 곳에서 관리하는 것이 좋다.

이럴 때 DefinePlugin을 사용한다.

webpack.config.js:

const webpack = require("webpack")

export default {
  plugins: [new webpack.DefinePlugin({})],
}

빈 객체를 전달했지만 기본적으로 넣어주는 값이 있다. 노드 환경정보인 process.env.NODE_ENV 인데 웹팩 설정의 mode에 설정한 값이 여기에 들어간다.

app.js:

console.log(process.env.NODE_ENV) // "development"

이 외에도 웹팩 컴파일 시간에 결저오디는 값을 전역 상수 문자열로 애플리케이션에 주입할 수 있다.

new webpack.DefinePlugin({
  TWO: "1+1",
})

app.js:

console.log(Two); // 2

3. HtmlTemplatePlugin

HtmlWebpackPlugin은 HTML 파일을 후처리하는데 사용한다. 빌드 타임의 값을 넣거나 코드를 압축할 수 있다.

$ npm i -D html-webpack-plugin

빌드를 하면 HTML 파일로 아웃풋에 생성될 것이다.
src/index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>타이틀<%= env %></title>
  </head>
  <body>
    <!-- 로딩 스크립트 제거 -->
    <!-- <script src="dist/main.js"></script> -->
  </body>
</html>

src/index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>타이틀<%= env %></title>
  </head>
  <body>
    <!-- 로딩 스크립트 제거 -->
    <!-- <script src="dist/main.js"></script> -->
  </body>
</html>

타이틀 부분에 ejs 문법을 이용하는데 <%= env %> 는 전달받은 env 변수 값을 출력한다. HtmlWebpackPlugin은 이 변수에 데이터를 주입시켜 동적으로 HTML 코드를 생성한다.

뿐만 아니라 웹팩으로 빌드한 결과물을 자동으로 로딩하는 코드를 주입해 준다. 때문에 스크립트 로딩 코드도 제거했다.

webpack.config.js:

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

module.exports {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 템플릿 경로를 지정
      templateParameters: { // 템플릿에 주입할 파라매터 변수 지정
        env: process.env.NODE_ENV === 'development' ? '(개발용)' : '',
      },
    })
  ]
}

개발 환경과 달리 운영환경에서는 파일을 압축하고 불필요한 주석을 제거하는 것이 좋다.
webpack.config.js:

new HtmlWebpackPlugin({
  minify: process.env.NODE_ENV === 'production' ? {
    collapseWhitespace: true, // 빈칸 제거
    removeComments: true, // 주석 제거
  } : false,
}

환경변수에 따라 minify 옵션을 켰다.

NODE_ENV=production npm run build로 빌드하면 코드가 압축된다.

이 글은 김정환님 블로그를 토대로 작성되었습니다.

profile
개발자 제이든

0개의 댓글