plugin
html-webpack-plugin
css 애셋, js파일을 포함한 html 파일을 생성합니다.
CSS 애셋과 엔트리 포인트에 명시된 script를 html에 자동으로 추가합니다.
html 파일의 <head> 요소 안에서 css파일은 <link>, js파일은 <script> 태그로 포함합니다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({ template: 'index.html' })
]
}mini-css-extract-plugin
css 파일을 별도 파일로 추출합니다. css 코드가 포함된 js 파일 별로 css파일을 생성합니다.
개발 모드에서는 해당 플러그인을 사용하지 않는 것이 좋습니다.
css를 수정할 때마다 css 파일을 추출하는 것 보다는 style 요소의 코드로 주입하는 것이 훨씬 빨리 작동하므로 개발모드에서는 style-loader를 사용하고, 배포모드에서 MiniCssExtractPlugin.loader를 사용하는 것이 권장됩니다.
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
/* 개발 모드 감지 */
const isDevMode = process.env.NODE_ENV.includes('dev');
const plugins = [];
/* 배포 모드인 경우 MiniCssExtractPlugin 추가 */
if (!isDevMode) {
plugins.push(
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',
})
);
}
module.exports = {
/* 플러그인 설정 */
plugins,
module: {
rules: [
/* 스타일 파일 로더 */
{
test: /\.(sa|sc|c)ss$/i,
exclude: /node_modules/,
use: [
isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
],
},
}webpack.DefinePlugin
모든 자바스크립트 코드에서 접근이 가능한 전역 변수를 선언합니다.
전역변수를 지나치게 사용하면 글로벌 네임스페이스가 너무 많은 변수들로 오염되어 유지보수성을 저해하므로 반드시 필요한 상황에 제한적으로 사용해야합니다.
주로 전역에서 접근할 수 있는 환경변수를 설정할 때 씁니다.
dotenv 로 .env에 선언한 환경 변수를 process.env를 세팅한 뒤에
webpack.DefinePlugin 을 사용하면 파일 어디에서든 process.env에 접근 할 수 있습니다.
const dotenv = require("dotenv");
const webpack = require('webpack');
/* .env 파일을 파싱한 객체가 리턴되어 process.env에 세팅 */
dotenv.config();
module.exports = {
/* 파일 어디서든 process.env 라는 전역변수에 접근할 수 있도록 정의 */
plugins: [
new webpack.DefinePlugin({ 'process.env': JSON.stringify(process.env) })
]
}interpolate-html-plugin
html 파일에서 사용할 변수를 설정할 수 있습니다.
퍼블릭 경로와 환경변수를 %PUBLIC_URL%, %MY_KEY% 과 같은 형식으로 접근할 수 있도록 하는 예시입니다.
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
module.exports = {
plugins: [
new InterpolateHtmlPlugin({ PUBLIC_URL: '', MY_KEY: process.env.MY_KEY })
]
}clean-webpack-plugin
webpack에 의해 빌드 된 결과물을 자동 정리합니다.
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
'**/*',
/* dist 폴더 안의 모든 것을 지우도록 설정 */
path.resolve(process.cwd(), 'dist/**/*'),
],
})
]
}