[인프런] 프론트엔드 개발환경의 이해와 실습 (자주 사용하는 플러그인)

웹팩 설정 시, 자주 사용하는 플러그인에 대해 알아보고 직접 적용해보자.

자주 사용하는 플러그인

BannerPlugin

BannerPlugin은 웹팩에 내장되어 있는 플러그인으로, 번들링한 결과물에 빌드 정보, 커밋 버전 등 사용자가 원하는 내용을 추가할 수 있다.

webpack.config.js

const webpack = require("webpack")
const childProcess = require("child_process")

...

plugins: [
    new webpack.BannerPlugin({
      banner: `
        Build Date: ${new Date().toLocaleString()}
        Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
        Author: ${childProcess.execSync('git config user.name')}
      `
    })
  ]
}

webpack 내장 플러그인이니까 webpack에서 불러와준다. 그리고 banner: 다음에 오는 내용이 번들링된 결과물에 추가되는 것이다.

 

빌드하고 나면, 다음과 같이 순서대로 빌드한 날짜와 시간, 커밋 버전, 작성자가 추가된다.

 

DefinePlugin

애플리케이션은 개발 환경과 운영 환경으로 나눠서 운영한다. 환경에 따라 API 서버 주소가 다를 수 있는데, 같은 소스 코드로 두 환경에 배포하기 위해서는 환경 의존적인 정보를 소스 코드가 아닌 다른 곳에서 관리하는 것이 필요하다. 배포할 때마다 코드를 수정하는 것은 곤란하기 때문이다.

이 때 사용하면 좋은 플러그인이 바로 DefinePlugin이다. 이 역시 웹팩 내장 플러그인이며, 이러한 환경 정보를 제공할 수 있다.

webpack.config.js

const webpack = require("webpack")

...

module.exports = {
  mode: "development",
	plugins: [
    new webpack.DefinePlugin({})
  ]
}

위와 같이 빈 객체만 전달해도 기본적으로 넣어주는 값이 있다. 노드 환경정보인 process.env.NODE_ENV 이다. 웹팩 설정의 mode 에 설정한 값이 들어가게 된다. 우리는 development로 설정했기 때문에 process.env.NODE_ENV로 접근하면 development 라는 값을 얻게 된다.

 

이외에도 웹팩 컴파일 시간에 결정되는 값을 전역 상수 문자열로 애플리케이션에 값을 넣어줄 수 있다.

webpack.config.js

plugins: [
    new webpack.DefinePlugin({
      SUM: "1+5",
      VERSION: JSON.stringify("v.1.2.3"),
      "api.domain": JSON.stringify("http://dev.api.domain.com")
    })
  ]
}

SUM이라는 전역 변수에 1+5라는 코드 조각을 넣었다. 실제 애플리케이션 코드인 app.js에서 해당 변수를 출력해보면 1+5의 결과 값인 6이 나올 것이다.

코드가 아닌 값을 입력하고 싶다면 문자열화 한 뒤에 넘겨야한다. JSON.stringfy() 함수를 적용하면 된다.

 

app.js

console.log(process.env.NODE_ENV)
console.log(SUM)
console.log(api.domain)

이렇게 실제 애플리케이션 코드에서 값들을 불러보자. 그리고 브라우저 콘솔창에서 확인해보면 다음과 같이 나타난다.

 

 

빌드하는 동안 결정되는 값을 애플리케이션에 전달하고 싶을 때는 DefinePlugin을 사용하자.

 

 

 

HtmlWebpackPlugin

서드 파티 패키지인 HtmlWebpackPlugin에 대해 알아보자. 이 플러그인은 HTML 파일을 후처리하는데 사용한다. 빌드 타임에 값을 넣거나 코드를 압축할 수 있다. 원래는 HTML 파일을 빌드 과정에 넣지 않았는데, 해당 플러그인을 사용하면 빌드 과정에 넣어 HTML을 동적으로 생성할 수 있게 된다.

먼저 패키지를 설치하자.

$ npm install -D html-webpack-plugin

 

webpack.config.js

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

...

plugins: [
    new HtmlWebpackPlugin({
			hash: true,
      template: './src/index.html',
      templateParameters: {
        env: process.env.NODE_ENV === 'development' ? '(개발용)' : ''
      },
      minify: process.env.NODE_ENV === 'production' ? {
        collapseWhitespace: true, // 빈칸 제거
        removeComments: true // 주석 제거
      } : false
    })
  ]
}

HtmlWebpackPlugin 사용을 위해 위와 같이 코드를 작성했다. 이 플러그인은 웹팩으로 빌드한 결과물을 자동으로 로딩하는 코드를 넣어준다. 따라서 HTML의 스크립트 코드를 제거했다. 그리고 빌드하면 HTML 파일로 아웃풋에 생성될 것이기 때문에 index.html 파일을 src 폴더로 이동하자.

 

그리고 객체로 전달한 4가지 내용을 살펴보자.

• hash: 빌드할 때 생성하는 해시값을 정적파일 로딩 주소의 쿼리 문자열로 붙여서 HTML을 생성해준다.
  • 정적파일을 배포하면 브라우저에 바로 반영되지 않는 경우가 있는데, 브라우저 캐시가 원인일 수 있기 때문에 예방 차원에서 사용한다.
• template: 탬플릿 경로를 지정한다. 즉, HTML 파일 경로를 작성하면 된다.
• templateParameters: 탬플릿에 넣을 파라미터 변수 지정
  • 위의 코드에서는 env 이며, HTML 파일에 ejs 문법을 사용하여 <%= env %> 이렇게 작성해주면 된다. 플러그인이 env 변수에 데이터를 넣어 동적으로 HTML 코드를 생성할 수 있다.
  • 빌드 시, NODE_ENV=development npm run build 명령어로 빌드하면 개발용이라는 텍스트가 나타날 것이다.
• minify
  • 개발 환경과 달리 운영 환경(production)에서는 파일을 압축하고 불필요한 주석을 제거하는 것이 좋기 때문에 위와 같은 옵션을 추가했다.

 

CleanWebpackPlugin

CleanWebpackPlugin은 이전 빌드 결과물을 제거해주는 플러그인이다. 빌드 결과물은 설정해둔 아웃풋 경로에 모이는데 과거 파일이 남아 있을 수 있다. 모두 제거 후 새로 결과물을 남기고 싶을 때 사용하면 된다.

웹팩 내장 플러그인이 아니기 때문에 따로 설치해주자.

$ npm install -D clean-webpack-plugin

 

웹팩 설정 파일에 추가해준다.

webpack.config.js

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

module.exports = {
  plugins: [new CleanWebpackPlugin()],
}

코드 맨 첫 줄을 보면, CleanWebpackPlugin은 구조분해 할당으로 가져와야 한다.

임의로 빌드 결과물 폴더에 파일을 하나 추가한 후, 저장하고 빌드해보면 임의로 만든 파일이 삭제되는 것을 확인할 수 있을 것이다.

 

 

MiniCssExtractPlugin

스타일시트가 많아지면 하나의 자바스크립트 파일로 결과물을 만드는 것이 부담일 수 있다. MiniCssExtractPlugin을 사용하면 번들링된 결과에서 스타일시트 코드만 뽑아서 별도의 CSS 파일로 만들어준다. 개발환경에서는 CSS를 하나의 모듈로 처리해도 상관없지만 프로덕션 환경에서는 분리하여 로딩 속도를 높여주는 것이 좋다.

패키지를 설치하자.

$ npm install -D mini-css-extract-plugin

 

웹팩 설정 파일에 추가해준다.

webpack.config.js

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

module.exports = {
  plugins: [
    ...(process.env.NODE_ENV === "production"
      ? [new MiniCssExtractPlugin({ filename: `[name].css` })]
      : []),
  ],
}

앞서 말했듯이, 프로덕션 환경일 경우에만 이 플러그인을 사용하도록 코드를 작성했다. filename에 설정한 이름으로 아웃풋 경로에 CSS 파일이 생성될 것이다.

 

개발 환경에서는 css-loader에 의해 변경된 스타일시트를 적용하기 위해 style-loader를 사용했다. 반면, 프로덕션 환경에서는 별도의 CSS 파일을 추출하는 플러그인을 적용했기 때문에 다른 로더를 사용해야 한다.

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

NODE_ENV=production npm run build 명령어를 실행시키면, 아웃풋 경로에 CSS 파일이 생성되고 index.html에 이 파일을 로딩하는 코드도 추가된 것을 확인할 수 있다.

 

---

출처: [인프런] 프론트엔드 개발환경의 이해와 실습