[Webpack, plugin] 자주 사용하는 플러그인을 알아보자!

안녕하세요! 오늘은 웹팩을 공부하면서 알게 된 자주 사용하게 되는 플러그인들을 포스팅해보려고 합니다! 🥰

 

BannerPlugin

처음으로 배너 플러그인에 대해서 알아보겠습니다! 배너 플러그인은 빌드의 정보등을 dist 폴더에 문자열로써 담을 수 있는 플러그인입니다!

이 것은 웹팩이 기본으로 제공하는 플러그인으로써 어떻게 사용하는지 한 번 확인해보도록 합시다!

 

우리가 빌드를 실행할 때 현재 빌드된 버전의 기본적인 정보를 담을 수 있겠죠? 예를 들어서 깃의 HEAD의 대한 정보라던가, 언제 이 빌드가 진행되었는가에 대한 정보를 담을 수 있을 겁니다! 그럼 bannerplugin을 사용하기 위한 웹팩 설정을 살펴봅시다!

 

/webpack.config.js

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

module.exports = {
	...,
	plugin: [
    	new webpack.BannerPlugin({
        	banner: `
            	빌드 날짜: ${new Date().toLocalString()}
                커밋 버전: ${childprocess.execSync('git rev-parse --short HEAD')}
                커밋 작성자: ${childprocess.execSync('git config user.name')}
            `
        })
    ]
}

이렇게 기본적으로 webpack 모듈에서 제공하는 BannerPlugin을 통해 우리는 dist폴더에 생기는 우리의 번들된 파일 (main.js 등) 빌드에 대한 정보를 담을 수 있습니다!

 

 

DefinePlugin

우리가 애플리케이션을 운영할 때 당연히 개발환경과 프로덕션 환경으로 구분해서 사용할 것이고, 그에 대한 환경변수는 다른 환경변수를 사용하게 될 것입니다. 당연히 DB나 이에 대한 env도 다른 것을 사용할 것이구요. 우리는 이것을 웹팩의 process.env.NODE_ENV를 통해 환경변수의 상태를 통제합니다. 이 플러그인도 마찬가지로 웹팩의 기본 플러그인입니다! 😃

 

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

module.exports = {
	mode: 'development'
	...,
	plugin: [
    	new webpack.BannerPlugin({
        	banner: `
            	빌드 날짜: ${new Date().toLocalString()}
                커밋 버전: ${childprocess.execSync('git rev-parse --short HEAD')}
                커밋 작성자: ${childprocess.execSync('git config user.name')}
            `
        }),
        new webpack.DefinePlugin({
        	'dev_api_domain': JSON.Stringify('https://dev.api.sangjun/')
        })
    ]
}

우리가 웹팩을 설정할 때, 오브젝트의 mode를 통해 모드를 지정할 수 있습니다. 여기에서는 "development"로 지정되어 있는 것을 확인할 수 있습니다. 즉 개발환경에 대한 웹팩이라는 소리이고, process.env.NODE_ENV는 development를 출력할 것 입니다.

 

개발서버의 api연결을 위한 도메인을 환경변수에 지정하고 싶다면, 이 definePlugin을 통해, 지정할 수 있을 것입니다. 만약 프로덕션 환경으로 빌드를 진행하게 된다면, mode를 production으로 바꾸고, 그에 대한 환경변수에 대한 세팅을 production에 대한 세팅으로 바꾸면 되겠지요?!

 

HtmlWebpackPlugin

html을 dist폴더의 output으로 사용하고 싶다면, html-webpack-plugin을 사용해야 합니다.

우선 우리는 html-webpack-plugin을 다운로드 받아야합니다!

npm install html-webpack-plugin

 

그리고 아까 작성하던 webpack.config.js에서 htmlplugin 에 대한 옵션을 줍니다.

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

module.exports = {
	mode: 'development'
	...,
	plugin: [
    	new webpack.BannerPlugin({
        	banner: `
            	빌드 날짜: ${new Date().toLocalString()}
                커밋 버전: ${childprocess.execSync('git rev-parse --short HEAD')}
                커밋 작성자: ${childprocess.execSync('git config user.name')}
            `
        }),
        new webpack.DefinePlugin({
        	'dev_api_domain': JSON.Stringify('https://dev.api.sangjun/')
        }),
        new webpack.HtmlPlugin({
            template: './src/index.html',
            templateParameter: {
            	env: process.env.NODE_ENV === 'development' ? '개발용' : ''
            },
            minify: process.env.NODE_ENV === 'production' ? {
            	collapseWhiteSpace: true,
                removeComments: true
            } : false
        })
    ]
}

살펴보면 src의 index.html도 빌드 과정에 추가하는 것을 볼 수 있습니다. 우리는 파라메터도 넘겨줄 수 있고, NODE_ENV의 상태에 따라, 파일 크기를 줄이기 위해 모든 줄바꿈과, 스페이싱을 없애는 과정도 거칠 수 있으며, 의존성도 낮출 수 있습니다 😄

 

이렇게 많이 사용하는 세 가지 정도의 플러그인을 알아보았습니다. 웹팩은 각자 파일간의 의존도를 낮추기 위해, 모든 파일들을 하나로 합쳐준다는 개념을 기억하며 포스팅을 마치도록 하겠습니다!

 

오늘도 읽어주셔서 감사합니다!