Webpack 개발 환경 설정 및 주요 Plugin 사용하는 법

지난 포스팅 때 Webpack의 개념과 Loader를 사용하는 방법을 알아보았다.

https://for-it-study.tistory.com/93

Webpack 개념정리 및 CSS, 이미지 모듈화

 

위 포스팅에서는 Webpack 개발환경을 설정할 때 webpack.config.js에 있는 mode 프로퍼티를 통해 제어하는 방식으로 사용하고,

새롭게 빌드하려고 할 때마다 npm run build를 입력해 주어야 해서 불편했다.

 

하지만cross-env와 watch 모드를 사용하면 보다 쉽게 빌드할 수 있는 개발 환경을 만들 수 있다.

 

1. Cross-env 사용하기

cross-env는 운영체제나 플랫폼에 종속되지 않고 동일한 방법으로 env변수를 주입해주는 패키지이다.

 

1) 패키지 설치

npm install cross-env

- npm을 사용하여 cross-env 변수를 주입해주는 패키지를 설치한다.

* cross-env와 유사한 이름의 악성패키지 이슈가 있었다. 패키지를 설치할 때 오타에 유의해서 정확하게 입력하여 설치하여야 한다.

관련기사: https://www.boannews.com/media/view.asp?idx=56184&skind=O 

 

2) package.json 수정하기

"build": "cross-env NODE_ENV=development webpack --progress",
"build:pro": "cross-env NODE_ENV=production webpack --progress"

- "build": "cross-env NODE_ENV=development webpack --progress", : development 모드 실행 키

- "build:pro": "cross-env NODE_ENV=production webpack --progress" : production 모드 실행 키

 

3) webpack.config.js 수정하기

mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',

-  env.NODE_ENV를 받아왔을때 'development' 이면 development 모드로 전환하고 'production'이면 prodction 모드로 전환한다.

 

4) 모드를 전환하여 번들링 하고 싶을 떄 다음과 같은 명령어를 입력해 주면 된다.

npm run build // development 모드
npm run build:pro // production 모드

 

2. Watch 사용하기

watch는 webpack의 종속성 그래프 내의 모든 파일에서 변경사항을 감시할  수 있게 해 준다. 이러한 파일 중 하나가 업데이트되면 코드가 다시 컴파일되므로 전체 빌드를 자동으로 실행해준다.

 

1) npx로 watch 모드 사용

npx webpack --watch

- 위의 명령어를 입력하면 watch모드가 되어 파일을 업데이트하면 코드가 다시 컴파일되어 자동으로 빌드가 진행된다.

- watch 모드를 해제하고 싶다면 control + c를 누르면 된다.

 

2) package.json에 --watch모드를 입력하여 번들링 했을 때 바로 watch 모드가 되게 설정

"scripts": {
	"build": "webpack --watch",
  },

- build 명령어 끝 부분에 --watch를 입력하면 첫 번들링 시 watch 모드가 된다.

 

- watch 모드를 해제하고 싶다면 control + c를 누르면 된다.

 

3. Plugin 사용하기

플로 그 인은 최종적으로 번들링 된 결과물을 가공할때 사용한다.

 

3.1 BannerPlugin

번들링된 파일의 최상단에 배너를 달아주는 플러그인이다. 주로 빌드와 관련된 정보를 제공할 때 사용한다.

1) webpack 모듈 불러오기

- 웹팩에서 기본적으로 제공하는 플러그인이기 때문에 설치할 필요 없이 아래 코드를 webpack.config.js에 입력하여 사용할 수 있다.

const webpack = require('webpack');

2) module외부 하단에 Banner를 사용하는 속성을 추가하고 원하는 banner 내용 입력 후 번들링

plugins: [
  	new webpack.BannerPlugin({
      		banner: '배너입니다!!'
  	})
]

모듈화 된 dist 폴더 main.js 상단에 다음과 같이 주석으로 banner가 추가된다.

 

협업에서는 git에 연동하여 깃과 관련돼 정보를 배너에 추가하는 형식으로 많이 사용된다.

 

* git 연동 후 사용 법

1) webpack을 사용하는 프로젝트와 깃허브 레포지토지에 push 한다.

2) github 명령어를 웹팩에서도 사용할 수 있도록 webpack.config.js 상단에 child_process 모듈을 추가한다.

const childProcess = require('child_process');

3) 생성했던 plugin에 banner 프로퍼티로 다음과 같이 입력해준다.

plugins: [
    new webpack.BannerPlugin({
      banner: `
                Commit version : ${childProcess.execSync(
                  "git rev-parse --short HEAD"
                )}
                Committer name : ${childProcess.execSync(
                  "git config user.name"
                )}
                Commit Date : ${new Date().toLocaleString()}
            `,
    }),
    ]

git rev-parse --short HEAD: 커밋의 해쉬 번호 확인

 

git config use.name: 커밋한 유저의 이름 확인

 

childProcess.execSync("깃 명령어"): child_process를 사용하여 git 명령어를 사용 할 수 있도록 해준다.

 

결과 화면

 

3.2  DefinePlugin

소스코드에 직접적으로 작성하면 안 되는 전역 상수를 만든다. 주로 개발 과정에서 필요한 환경변수들을 애플리케이션에 전달해주고 싶을 때 많이 사용한다.

* 전역 상수: 전역에서 선언된 상수 어디에든 참조할 수 있다.

* 환경변수: 프로그램을 실행시키는데 영향을 미치는 변수들의 집합이다. (api 인증키 값, api 주소 등) 

DfinePlugin도 webpack에서 기본적으로 제공하는 플러그인 이기 때문에 설치할 필요 없다

 

1)  환경 변수를 이용해서 두 가지 환경에서 다른 환경변수를 제공 하는 방법

- webpack.config.js에 plugin에 다음과 같이 두가지 환경을 입력

plugins: [
new webpack.DefinePlugin({
    dev: JSON.stringify('https://dev.api.com'),
    pro: JSON.stringify('https://pro.api.com')
})
]

-  모듈화 할 app.js 에  if문을 사용하여 env(노드 환경변수에) development 모드 일떄,  production 모드일 때의 서로 다른 환경변수 값을 반환하도록 입력

let env;

if (process.env.NODE_ENV === 'development') {
	env = dev;
} else {
	env = pro;
 }

2) dotenv를 사용하여 전역 상수를 깃허브에 노출시키지 않고 환경변수 설정

dotenv 모듈을 사용하면 .env 파일을 생성하여 별도의 파일로 환경변수를 저장할 수 있다.

 

- dotenv 패키지를 설치

npm install dotenv --save

- .env 파일을 루트 폴더에 생성하여 외부에 노출하면 안 되는 정보를 저장. 

# 예시
예시1_API = 'https://예시1.api.com/'
예시2_API = 'https://예시2.api.com/'

- dotenv를 사용하기 위하여 webpack.config.js 상단에 다음과 같이 작성

require('dotenv').config();

- 원하는 정보 앞에 process.env를 입력해 준다면 변수처럼 사용할 수 있다.

new webpack.DefinePlugin({
    dev: JSON.stringify(process.env.예시1_API),
    pro: JSON.stringify(process.env.예시2_API)
}),

- .gitignore 파일을 생성하여 .env 파일을 추가하면 github에서 .env 파일을 추적하지 않아 깃허브에 노출되지 않는다.

 

 

3.3 HtmlWebpackPlugin

Html 파일을 번들링 단계에서 컨트롤할 수 있도록 도와주는 플러그인이다. html을 동적으로 관리할 수 있게 해 준다.

 

1) html-webpack-plugin 패키지 설치

npm install html-webpack-plugin

2) webpack.config.js 파일에 html-webpack-plugin을 사용하기 위해  상단에 다음과 같이 입력해준다.

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

3) webpack.config.js 파일에 번들링 할 html의 경로를 작성해준다.

plugin: [
new HtmlWebpackPlugin( {
	template: "./src/index.html"
})
]

template에 작성된 경로의 html 파일을 번들링 하며 dist 폴더에 번들링 된 새로운 index.htm이 생성된다.

 

3.4 CleanWebpackPlugin

빌드 이전에 남아있는 결과물을 제거해주는 플러그인이다. webpack을 사용하여 번들링 하고 난 후 더 이상 사용하지 않더라도  항상 빌드된 파일들이 남아있게 된다. 이를 해결하기 위해 CleanWebpackPlugin을 사용하여  빌드했었던 파일들을 삭제할 수 있다.

 

1) clean-webpack-plugin 패키지 설치

npm install clean-webpack-plugin

 2) 패키지를 사용하기 위하여 webpack.config.js 상단에 모듈을 불러오는 코드를 작성한다.

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

이때 CleanWebpackPlugin에는 default export가 되어 있지 않기 때문에 중괄호를 꼭 작성해 주어 한다.

 

3) 플러그인에 모듈을 추가한다. 빌드되었던 파일들을 삭제할 수 있다.

new CleanWebpackPlugin()

 

위의 plugin 들과 사용방법들은 가장 기본적인 방법들이며 보다 더 다양한 plugin이 있고 다양한 방식으로도 활용 가능하다. 시간이 된다면 보다 더 깊게 webpack을 공부해보고 싶다.

 

더 다양한 방식으로 webpack plugin 사용하는 참고사이트:

https://yamoo9.gitbook.io/webpack/webpack/webpack-plugins