🔧Webpack : 자주 사용되는 Plugin

이번 포스팅에서는 자주 사용되는 플러그인에 관해 살펴 볼 것이다. 자주 사용되는 대표적 플러그인 5가지를 살펴 볼 것이다. 

---

BannerPlugin

이전 포스팅에서 우리가 BannerPlugin을 모사했다. 이 플러그인은 webpack에서 기본적으로 제공을 해주는 플러그인이다. BannerPlugin은 결과물에 빌드 정보나 커밋 버전같은 것을 추가 할 수 있다. 이를 webpack.config에 적용하는 방법은 아래와 같다.

//webpack.config.js

const path = require('path');
const MyWebpackPlugin = require('./my-webpack-plugin');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/app.js'
  },
 /* -- 중간 생략 -- */
  plugins: [
    new CleanWebpackPlugin(), // 빌드 전에 dist 폴더를 정리합니다.
    new webpack.BannerPlugin({
      banner: '이것은 Banner 입니다.'
    })
  ],
}

이번에는 생성된 시간과 깃 커밋 log 번호 그리고 작성자 정보를 넣어 보자.

::cmd
git rev-parse --short HEAD

::a7cec5b

git config user.name

::4Bee

 깃 커밋 log 번호는 git log와 같이 확인을 할 수도 있지만 너무길기 때문에 아래와같은 명령어를 실행해서 단축된 log번호를 가져올 수 있다. 이렇게 git을 통해서 하나하나 매번 정보를 우리가 입력해서 넣어 줄 수 없다. 그래서 이를 자동화 하는 방법이 있는데 그것은 node-modules에서 제공해주는 childProcess를 사용하는 것이다. 아래 코드를 참고하자.

//webpack.config.js

/* -- 중간 생략 -- */
const webpack = require('webpack');
const childProcess = require('child_process');  //from node_modules
/* -- 중간 생략 -- */
  plugins: [
    new CleanWebpackPlugin(), // 빌드 전에 dist 폴더를 정리합니다.
    new webpack.BannerPlugin({
      banner: `
      Build Date: ${new Date().toLocaleDateString()}
      Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
      Author: ${childProcess.execSync('git config user.name')}
      `
    })
  ],
 }

이렇게 childProcess를 사용해서 git 명령어를 build가 되는 과정에 execSync로 실행시키게 만들면 된다. 이제 build된 결과를 보면 아래와 같이 배너에 추가가되는 것을 알 수 있다.

/*dist/main.js*/
/*!
 * 
 *       Build Date: 2024. 8. 23.
 *       Commit Version: a7cec5b
 *
 *       Author: 4Bee
 *
 *
 */

마치 우리가 브라우저에 console을 통한 log를 확인하는 용도와 유사하다. 잘 활요을 하면 매우 유용할 것 같다.

---

DefinePlugin

  프론트에서 프로젝트를 관리 할 때 개발환경과 배포환경으로 나누어서 운영을 한다. 그래서 서버 API 서버 주소나 변경이 될 정보들이 있을 수 있다. 이런 것들을 `환경 의존 정보`라고 한다. 따라 배포를 할 때 마다 코드를 계속해서 변경하는 번거로움을 줄이고자 DefinePlugin을 사용해서 쉽게 해결 할수 있다.(dotenv와 같은 라이브러리가 있지만 해당 플러그인으로 대체할 수 있지 않을까 한다.) 해당 플러그인 역시 webpack에서 기본적으로 제공해주는 플러그인이다. 이를 활용하기 위해서는 process.env.NODE_ENV가 있다. 여기로 접근해서 webpack.config의 `mode`값을 얻어와서 활용하면 된다.  process.env.NODE_ENV를 app.js에서 console로 확인이 가능하다. 따라 ` development`라는 결과를 얻을 수 있다. 그럼 이제 직접 환경변수를 만들어보자.

//webpack.config.js

/* -- 중간 생략 -- */
const webpack = require('webpack');
const childProcess = require('child_process');  //from node_modules
/* -- 중간 생략 -- */
  plugins: [
    new CleanWebpackPlugin(), // 빌드 전에 dist 폴더를 정리합니다.
    new webpack.BannerPlugin({
      banner: `
      Build Date: ${new Date().toLocaleDateString()}
      Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
      Author: ${childProcess.execSync('git config user.name')}
      `
    }),
    new webpack.DefinePlugin({
      TWO: '1+1'
    })
  ],
 }

이제 app.js에 TWO라는 환경변수에 접근을 하려면 아래와 같이 작성하면 된다.

//app.js

console.log(process.env.NODE_ENV);
console.log(TWO);  //2

하지만 결과는 값으로 console이 찍힌다. 그렇다면 문자로 결과를 도출하고 싶다면 아래와 같이 수정하면 된다.

//TWO: '1+1'
TWO: JSON.stringify('1+1')  //1+1
// 객체 방식
'api.domain': JSON.stringify('http://dev.api.domain.com')

---

HtmlTemplatePlugin

HtmlTemplatePlugin은 이전 플러그인과 달리 써드 파티 패키지이기에 따로 설치를 해줘야 한다. HtmlTemplatePlugin은 HTML 파일을 후처리하는 플러그인이며 빌드 타임의 값을 넣거나 코드를 압축하는 역할을 한다. HtmlTemplatePlugin은 html을 작업하는 플러그인이기 때문에 정상적으로 동작하게 하려면 src 디렉토리에 html이 있을 경우, webpack으로 작업을 해야하는 경우에만 사용하면 된다 볼 수 있다. 코드는 아래와 같다.

//webpack.config.js

/* -- 중간 생략 -- */
const webpack = require('webpack');
const childProcess = require('child_process');  //from node_modules
const HtmlWebpackPlugin = require('html-webpack-plugin');

/* -- 중간 생략 -- */ 
 plugins: [
    new CleanWebpackPlugin(), // 빌드 전에 dist 폴더를 정리합니다.
    new webpack.BannerPlugin({
      banner: `
      Build Date: ${new Date().toLocaleDateString()}
      Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
      Author: ${childProcess.execSync('git config user.name')}
      `
    }),
    new webpack.DefinePlugin({
      TWO: JSON.stringify('1+1'),
      'api.domain': JSON.stringify('http://dev.api.domain.com')
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
}

이후 build를 하게 되면 dist 디렉토리에 index.html 파일이 들어 있는 것을 확인 할수 있다. 만약 live-server로 접근을 하려면 주소가 `PortNumber/~/dist/index.html`로 해줘야 한다.

  이번에는 이어서 html에서 사용할 수 있는 ejs 문법을 잠깐 다뤄 볼 것이다. 해당 문법은 HtmlTemplatePlugin에서 사용했던 template을 html에 직접 넣어 보는 것이다. 해당 문법은 envs라는 template를 넣을 수 있는 문법이다. 코드는 아래와 같다.

<!-- src/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document<%= env %></title>
</head>
<body>
<script type="module" src="./dist/main.js"></script>
</body>
</html>

이제 여기 env에 값을 넣어주려면 아래와 같이 webpack.config파일을 수정하면 된다.

//webpack.config.js

/* -- 중간 생략 -- */
const webpack = require('webpack');
const childProcess = require('child_process');  //from node_modules
const HtmlWebpackPlugin = require('html-webpack-plugin');
/* -- 중간 생략 -- */
    new HtmlWebpackPlugin({
      template: './src/index.html',
      templateParameters: {
        env: process.env.NODE_ENV === 'development' ? '(개발용)' : ''
      }
    })
  ],
}

이제 build를 하면된다. 단, NODE_ENV의 환경 변수를 설정하면 우리가 의도한 결과물이 나올 것이다. 따라서 일반적인 build가 아닌 아래와 같이 build명령으로 실행 해야한다.

:: 개발용이 아닌 제품용일 경우 development 대신production을 넣으면 ejs의 env 문법을 무시하고 빌드가 된다.
:: npm(Window)
set NODE_ENV=development&& npm run build
:: npm(MacOS)
NODE_ENV=development yarn run build

:: yarn(Window)
set NODE_ENV=development&& yarn run build
::yarn(MacOS)
NODE_ENV=development&& yarn build

  이외에도 빌드되는 html에 여러 조건을 줄수가 있는데 우리는 빈줄 제거와 주석 제거를 해볼 것이다. 아래와 같이 코드를 추가하자

//webpack.config.js

/* -- 중간 생략 -- */
const webpack = require('webpack');
const childProcess = require('child_process');  //from node_modules
const HtmlWebpackPlugin = require('html-webpack-plugin');
/* -- 중간 생략 -- */
    new HtmlWebpackPlugin({
      template: './src/index.html',
      templateParameters: {
        env: process.env.NODE_ENV === 'development' ? '(개발용)' : ''
      },
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      }
    })
  ],
}

이후 build를 확인하면 아래 코드처럼 html파일은 한줄로 코드가 완성된걸 확인할 수 있다.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document(개발용)</title><script defer="defer" src="main.js"></script></head><body><script type="module" src="./dist/main.js"></script></body></html>

이렇게 한줄로 build하는 경우는 일반적으로 development 방식이 아니라 producion일 경우에만 적용한다. 따라 아래와 같이 조건을 추가해주면 된다.

//webpack.config.js

/* -- 중간 생략 -- */
const webpack = require('webpack');
const childProcess = require('child_process');  //from node_modules
const HtmlWebpackPlugin = require('html-webpack-plugin');
/* -- 중간 생략 -- */
    new HtmlWebpackPlugin({
      template: './src/index.html',
      templateParameters: {
        env: process.env.NODE_ENV === 'development' ? '(개발용)' : ''
      },
      minify: production.env.NODE_ENV === 'production' ? {
        collapseWhitespace: true,
        removeComments: true,
      } : false
    })
  ],
}

---

저장하지 않고 브라우저를 끄는 바람에 `clean-webpack-plugin`과 `mini-css-extract-plugin`을 작성했던 코드들이 모두 사라졌다. 뒤에 자주 사용되는 플러그인 2개는 그리 어렵지 않았다. NODE_ENV를 잘 활용하는 방법들이였다. 오히려 주의 깊게 보아야 하는 부분은 mini-css-extract-plugin이였다. 추후에 다시 점검하면서 마무리 지을 것이다. 아래 Github에서 전체코드를 확인해 달라.

/* -- 중간 생략 -- */
new CleanWebpackPlugin(), // 빌드 전에 dist 폴더를 정리합니다.
    ...(process.env.NODE_ENV === 'production'
      ? [new MiniCssExtractPlugin({ filename: '[name].css' })]
      : [])

 

Frontend-Development-Environment/webpack.config.js at main · Programming-Contents-List/Frontend-Development-Environment