내가 원하는 파일, 원하는 설정대로 빌드하기 위해서 웹팩을 사용하는데 빌드 날짜와 시간을 추가해두면 어떤 파일이 가장 최근에 빌드된 것인지 확인하는데 유용하다. 그래서 자주 사용하는 플러그인을 통해 빌드된 파일 상단에 날짜와 시간을 추가해보려고한다.
1. BannerPlugin (js, css 파일 상단)
BannerPlugin은 webpack에 내장되어있는 플러그인으로 webpack을 설치했다면 따로 설치할 필요가 없다. 주로 javascript 번들 파일 맨 위에 주석을 추가하는 용도로 사용되는데 webpack.config.js 내의 plugins에 banner를 추가하여 원하는 날짜와 시간 형식을 추가해주면 된다.
const webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.BannerPlugin({
banner: `Build Date : ${new Date().toLocaleString()}`
})
],
...
}이렇게 적용한 후 프로젝트를 빌드해보면 빌드된 js, css 파일 상단에 날짜와 시간이 추가된 것을 볼 수 있다.
/*! Build Date : 2023. 9. 18. 오후 2:03:32 */
2. html-webpack-plugin (html 파일 상단)
js, css 등의 파일 상단에 추가할 때는 BannerPlugin이라는 플러그인을 사용하여 추가했지만 Html 상단에도 동일하게 추가하고 싶다면 html-webpack-plugin 또는copy-webpack-plugin 을 사용하면 된다. html-webpack-plugin은 프로젝트에서 HTML 파일을 생성하고 웹팩 번들을 해당 HTML 파일에 자동으로 포함시켜주는 플러그인으로 먼저 html-webpack-plugin을 사용하여 추가해보려고 한다. 해당 플러그인은 설치가 필요하기 때문에 먼저 설치해주자.
npm install html-webpack-plugin --save-dev
설치가 끝났다면 먼저 html 파일 가장 상단에 아래 부분을 추가해줘야한다.
<!-- Build Date : <%= htmlWebpackPlugin.options.templateParameters.buildDate %> -->
그 후, webpack.config.js 파일 내에서 플러그인 설정을 통해 buildDate를 추가해준다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', // HTML 템플릿 파일 경로
inject: false,
templateParameters: {
buildDate: new Date().toLocaleString() // 날짜와 시간 추가
},
filename: 'build/index.html', // 빌드 후 저장 경로 및 파일 이름
minify: {
collapseWhitespace: false // 줄 바꿈 유지
}
})
]
...
}
정상적으로 추가한 후, 빌드해보면 html 상단에도 똑같이 날짜와 시간이 추가된 것을 확인할 수 있다.
<!-- Build Date : 2023. 9. 18. 오후 2:03:37 -->
<!DOCTYPE html>
<html lang="ko">
...
</html>
3. copy-webpack-plugin (모든 파일 상단)
마지막으로 copy-webpack-plugin을 이용하여 파일 상단에 날짜와 시간을 추가하는 방법을 알아보려고 한다. copy-webpack-plugin은 파일을 복사하고 이동하는데 사용하는 플러그인으로 원하는 파일들을 뽑아서 빌드시키고 싶을 때 사용한다. 해당 플러그인 역시 설치 후 사용이 가능하기 때문에 먼저 설치해주자.
npm install copy-webpack-plugin --save-dev
설치했다면 webpack.config.js 파일에 플러그인을 추가해주면 된다. 이 때, transform을 이용해 파일 상단에 Build Date를 추가할 수 있다. 한가지 주의할 점은 파일 형식에 따라 주석의 형태가 다르기 때문에 buildDate에 각각의 파일 형태에 맞는 주석을 넣어주면 된다.
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
...
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: './public/index.html',
to: './index.html',
transform(content, path) {
if (path.endsWith('index.html')) {
const buildDate = `<!-- Build Date : ${new Date().toLocaleString()} -->\n\n`
return buildDate + content
}
return content
}
}
]
})
]
...
}
해당 플러그인들은 웹팩 설정이 어떻게 되어있느냐에 따라서 선택하여 사용하면 될 것 같다. 이렇게 설정해놓으면 빌드한 날짜와 시간이 명확하게 적혀있어 패치될 때마다 어떤 파일이 최신 파일인지 알 수 있어 편하다.
내가 원하는 파일, 원하는 설정대로 빌드하기 위해서 웹팩을 사용하는데 빌드 날짜와 시간을 추가해두면 어떤 파일이 가장 최근에 빌드된 것인지 확인하는데 유용하다. 그래서 자주 사용하는 플러그인을 통해 빌드된 파일 상단에 날짜와 시간을 추가해보려고한다.
1. BannerPlugin (js, css 파일 상단)
BannerPlugin은 webpack에 내장되어있는 플러그인으로 webpack을 설치했다면 따로 설치할 필요가 없다. 주로 javascript 번들 파일 맨 위에 주석을 추가하는 용도로 사용되는데 webpack.config.js 내의 plugins에 banner를 추가하여 원하는 날짜와 시간 형식을 추가해주면 된다.
const webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.BannerPlugin({
banner: `Build Date : ${new Date().toLocaleString()}`
})
],
...
}이렇게 적용한 후 프로젝트를 빌드해보면 빌드된 js, css 파일 상단에 날짜와 시간이 추가된 것을 볼 수 있다.
/*! Build Date : 2023. 9. 18. 오후 2:03:32 */
2. html-webpack-plugin (html 파일 상단)
js, css 등의 파일 상단에 추가할 때는 BannerPlugin이라는 플러그인을 사용하여 추가했지만 Html 상단에도 동일하게 추가하고 싶다면 html-webpack-plugin 또는copy-webpack-plugin 을 사용하면 된다. html-webpack-plugin은 프로젝트에서 HTML 파일을 생성하고 웹팩 번들을 해당 HTML 파일에 자동으로 포함시켜주는 플러그인으로 먼저 html-webpack-plugin을 사용하여 추가해보려고 한다. 해당 플러그인은 설치가 필요하기 때문에 먼저 설치해주자.
npm install html-webpack-plugin --save-dev
설치가 끝났다면 먼저 html 파일 가장 상단에 아래 부분을 추가해줘야한다.
<!-- Build Date : <%= htmlWebpackPlugin.options.templateParameters.buildDate %> -->
그 후, webpack.config.js 파일 내에서 플러그인 설정을 통해 buildDate를 추가해준다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', // HTML 템플릿 파일 경로
inject: false,
templateParameters: {
buildDate: new Date().toLocaleString() // 날짜와 시간 추가
},
filename: 'build/index.html', // 빌드 후 저장 경로 및 파일 이름
minify: {
collapseWhitespace: false // 줄 바꿈 유지
}
})
]
...
}
정상적으로 추가한 후, 빌드해보면 html 상단에도 똑같이 날짜와 시간이 추가된 것을 확인할 수 있다.
<!-- Build Date : 2023. 9. 18. 오후 2:03:37 -->
<!DOCTYPE html>
<html lang="ko">
...
</html>
3. copy-webpack-plugin (모든 파일 상단)
마지막으로 copy-webpack-plugin을 이용하여 파일 상단에 날짜와 시간을 추가하는 방법을 알아보려고 한다. copy-webpack-plugin은 파일을 복사하고 이동하는데 사용하는 플러그인으로 원하는 파일들을 뽑아서 빌드시키고 싶을 때 사용한다. 해당 플러그인 역시 설치 후 사용이 가능하기 때문에 먼저 설치해주자.
npm install copy-webpack-plugin --save-dev
설치했다면 webpack.config.js 파일에 플러그인을 추가해주면 된다. 이 때, transform을 이용해 파일 상단에 Build Date를 추가할 수 있다. 한가지 주의할 점은 파일 형식에 따라 주석의 형태가 다르기 때문에 buildDate에 각각의 파일 형태에 맞는 주석을 넣어주면 된다.
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
...
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: './public/index.html',
to: './index.html',
transform(content, path) {
if (path.endsWith('index.html')) {
const buildDate = `<!-- Build Date : ${new Date().toLocaleString()} -->\n\n`
return buildDate + content
}
return content
}
}
]
})
]
...
}
해당 플러그인들은 웹팩 설정이 어떻게 되어있느냐에 따라서 선택하여 사용하면 될 것 같다. 이렇게 설정해놓으면 빌드한 날짜와 시간이 명확하게 적혀있어 패치될 때마다 어떤 파일이 최신 파일인지 알 수 있어 편하다.
