주요 플러그인

BannerPlugin

이전에 플러그인을 이해하기 위해서 직접 만들어본 MyWebpackPlugin은 웹팩에서 기본으로 제공하는 BannerPlugin으로 존재한다

번들링한 결과물에 정보를 추가해주는 일을 한다

const path = require('path');
const webpack = require('webpack');
const childProcess = require('child_process');

module.exports = {
    ...
    plugins: [
        new webpack.BannerPlugin({
            banner: `
            Build Date : ${new Date().toLocaleDateString()}
            Author : ${childProcess.execSync('git config user.name')}
            `
        })
    ]
}

webpack에 내장되어있는 플러그인을 생성해서 설정해 주었다

childProcess는 터미널 명령어를 쓸 수 있게 해주는데 위와 같이 깃을 사용할 때 깃 정보를 입력해 줄 수도 있다

DefinePlugin

어플리케이션은 개발 환경과 운영 환경을 나누어서 관리한다

각각 환경에서 소스코드가 달라질 수 있는데 (api서버 주소)

배포할 때 마다 코드를 수정하는 것은 효율적이지 않기 때문에 DefinPlugin이라는 것을 사용한다

module.exports = {
    mode: "development",
    ...
    plugins: [
        new webpack.BannerPlugin({
            banner: `
            Build Date : ${new Date().toLocaleDateString()}
            Author : ${childProcess.execSync('git config user.name')}
            `
        }),
        new webpack.DefinePlugin({})
    ]
}

배너 플러그인과 마찬가지로 웹팩에 내장되어있는 플러그인이다

위와 같이 빈 객체를 전달해주면 노드 환경정보인 process.env.NODE_ENV에 webpack.config.js에서 설정한 mode의 값이 들어가게 된다

console.log(process.env.NODE_ENV); // development

다양한 환경 변수를 선언할 수 있다

    new webpack.DefinePlugin({
        TWO : '1+1', // consoloe.log(TWO) => 2
        STRING_TWO : JSON.stringify('1+1') // console.log(STRING_TWO) => '1+1'
        'domain.api' : JSON.stringify('http://localhost:3000/')
                // console.log(domain.api) => http://localhost:3000/
    })

기본적으로 value값에 들어가는 문자열은 코드로 해석된다

그래서 문자열 변수를 쓰고 싶다면 JSON을 사용해서 문자열로 바꿔주어야한다

객체형식으로 선언하는 것도 가능하다

HtmlWebpackPlugin

이때까지 기본적으로 js파일만 하나로 묶었지만 html까지 같이 묶어서 처리하고 싶을 때 사용한다

index.html도 이제 src폴더에서 관리하고 body하단에 들어가있던 script를 불러오기 위한 코드 또한 삭제했다

module.export = {
    ...
      new htmlWebpackPlugin({
        template: "./src/index.html"
       })
}

이상태로 npm run build를 해주면

dist 폴더에 html이 같이 들어간다

참고로 이전에 설정해둔 url-loader의 publicPath 옵션 때문에 html이 ./dist/dist경로의 bg파일을 읽어 오기 때문에 옵션값을 삭제해주어야한다

이것 말고도 다른 옵션도 있는데

바로 minify 옵션이다

  minify: {
        collapseWhitespace: true, // 공백 제거
        removeComments : true // 주석 제거
  }

CleanWebpackPlugin

이전 빌드 결과물을 지우고 이번 결과물만 dist 폴더에 남기는 플러그인이다

다른 옵션이나 객체를 넘겨줄 필요 없이 plugins 배열에 생성만 해주면 된다

module.expect = {
    ...
    new CleanWebpackPlugin(),
    ]
}