지난 챕터에서 웹팩 플러그인에 대해 알아보았다. 플러그인은 번들링이 끝나고 난 결과 파일에 대한 후속 처리를 해주는 기능을한다.
하지만 직접 작성할 일은 거의 없다고 했다. 자주 사용되는 플러그인을 알아보자 📌
웹팩이 기본으로 제공하는 플러그인으로 결과물에 빌드 정보나 커밋 버전같은 걸 추가할 수 있다.
생성자 함수에 전달하는 옵션 객체의 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')}
`,
}),
],
};
이렇게 정보에 관한 배너가 찍히는 걸 볼 수 있다.
어플리케이션은 개발환경과 운영환경으로 나눠서 운영한다. 가령 환경에 따라 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
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로 빌드하면 코드가 압축된다.
이 글은 김정환님 블로그를 토대로 작성되었습니다.