[JS] webpack 에 유용한 plugin 설정하기

say_ye·2022년 6월 13일
1

JavaScript

목록 보기
16/17
post-thumbnail

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/**/*'),
		],
	})
  ]
}

참고
https://yamoo9.gitbook.io/webpack

profile
우당탕탕 삽질 기록

0개의 댓글