[프론트엔드 개발환경과 실습] Webpack #4

👩‍💻 인프런 강의

---

Webpack Plugin

• 번들된 결과물을 난독화하거나 특정 텍스트를 추출하는데 사용
• 플러그인은 Class로 제작
• appply 함수를 구현, 인자로 받은 compiler 객체 안에 있는 tap() 함수를 사용
• 플러그인 작업이 완료되는 시점 = Done
• 번들된 결과물에 접근 = compilation

자주 사용하는 플러그인

환경변수 노출

webpack.config.js 👇

module.exports = {
  mode: "development",
}

console.log(process.env.NODE_ENV);

HtmlTemplatePlugin

• 써드 파티 패키지이기 때문에 설치 필수
• npm install html-webpack-plugin
• HTML 파일을 후처리하는데 사용, 빌드 타임의 값을 넣거나 코드를 압축
• esj 문법을 사용하여 <%= env %> 는 전달받은 env 변수 값을 출력
  <title>검색<%= env %></title> => Title(개발용)

webpack.config.js 👇

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

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 템플릿 경로를 지정
      templateParameters: { // 템플릿에 주입할 파라미터 변수 지정
        env: process.env.NODE_ENV === 'development' ? '(개발용)' : ''
      },
      minify: process.env.NODE_ENV === 'production' ? {
        collapseWhitespace: true, // 빈칸 제거
        removeComments: true // 주석 제거
      } : false
    })
  ]

CleanWebpackPlugin

• 빌드 이전 결과물(output) 제거
• npm install clean-webpack-plugin

webpack.config.js 👇

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

new CleanWebpackPlugin ()

MiniCssExtractPlugin

• 스타일시트 코드만 뽑아서 별도의 CSS 파일로 만들어줌
• npm install mini-css-extract-plugin

webpack.config.js 👇

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV === 'production'
          ? MiniCssExtractPlugin.loader // 프로덕션 환경
          : "style-loader", // 개발 환경
            "css-loader"
        ]
      }
   ]
}

...(process.env.NODE_ENV === 'production' // 프로덕션 환경일 경우만 이 플러그인을 추가
      ? [new MiniCssExtractPlugin({filename: '[name].css'})]
      : []
   )

** MiniCssExtractPlugin.loader : 개발 환경에서는 css-loader에의해 자바스크립트 모듈로 변경된 스타일시트를 적용하기위해 style-loader를 사용. 프로덕션 환경에서는 별도의 CSS 파일으로 추출하는 플러그인을 적용했으므로 다른 로더가 필요