Plugin

1. BannerPlugin

1. webpack.config.js 파일에 webpack 모듈을 불러옵니다. 웹팩에서 기본적으로 제공하는 플러그인이기 때문에 설치가 필요 없습니다.

const webpack = require('webpack');

1. Module 하단에 plugins 속성을 추가합니다.

plugins: [
  	new webpack.BannerPlugin({
      		banner: '배너입니다!!'
  	})
]

1. 빌드하고 결과를 확인합니다.

<미니 프로젝트>

1. git init 을 통해 깃 프로젝트임을 알려줍니다.

git init

1. 이제 파일들이 깃에 의해 추적됩니다. 필요 없는 파일들을 .gitignore 에 등록합니다.
1. .gitignore 파일을 루트 디렉토리에 생성합니다.
2. 무시해야할 목록을 작성합니다. (node_modules 폴더 무시, dist 디렉토리 하위의 모든 내용 무시)

node_modules
dist/*

c. 깃허브에서 연결할 레포지토리를 생성합니다.
d. 터미널에서 레포지토리와 프로젝트 폴더를 연결합니다.

git branch -m main (-m : move)
git remote add origin "레포 주소"
git add .
git commit -m "first commit"
git push -u origin main

1. 이제 깃과 프로젝트가 연결되었습니다. 깃의 정보를 웹팩으로 넘기는 방법을 알아보겠습니다.
1. 터미널에서 깃 명령어를 통해 여러 정보를 확인 할 수 있습니다.

git rev-parse --short HEAD
git config user.name

const childProcess = require('child_process');

commit version : ${childProcess.execSync('git rev-parse --short HEAD')}
committer : ${childProcess.execSync('git config user.name')}

2. DefinePlugin

new webpack.DefinePlugin({            
	pw: 123456
}),

3. HtmlWebpackPlugin

1. 플러그인을 설치합니다.

npm install html-webpack-plugin

1. webpack.config.js 파일에 html-webpack-plugin 플러그인 모듈을 불러옵니다.

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

1. 번들링 때 처리하고자 하는 html 파일을 src 폴더로 이동시킵니다.

1. webpack.config.js 파일에 플러그인과 타겟 html 파일의 경로를 등록합니다.

new HtmlWebpackPlugin({
    template: './src/index.html', // 목표 html 파일의 위치입니다.
})

1. npm run build! 이제 번들링 단계에서 html 이 처리가 되는것을 확인 할 수 있습니다.

<미니 프로젝트>

1. webpack.config.js 파일의 HtmlWebpackPlugin 객체에 다음의 코드를 추가합니다.

minify: {
            collapseWhitespace: true,
            removeComments: true,
        }

1. 다시 빌드하여 결과물을 확인합니다. 잘 압축이 되어 있는 모습을 확인 할 수 있습니다. 하지만 개발환경에서도 이런 모습이라면 유지보수하기 매우 어려울겁니다. 프로덕션 환경에서만 경량화되도록 설정해봅시다!

1. webpack.config.js 파일의 HtmlWebpackPlugin 객체에 minify 부분을 수정해봅시다.

minify: process.env.NODE_ENV === 'production' ? {
                collapseWhitespace: true,
                removeComments: true,
            } : false

1. process.env.NODE_ENV 는 노드 환경 정보를 어플리케이션으로 전달 할 수 있습니다. app.js 파일에서 console.log(process.env.NODE_ENV) 로 확인해 봅시다.

1. 하지만 process.env.NODE_ENV 값을 아직 webpack.config.js 에서는 사용할 수 없습니다. 이는 webpack5 버전으로 오면서 달라진 점으로 보입니다.

1. 운영체제나 플랫폼에 종속되지 않고 동일한 방법으로 env 변수를 주입해주는 패키지인 cross-env 를 설치해봅시다.

npm install cross-env

1. 설치가 완료되면 이제 빌드할 때 명령어를 development 와 production 두가지 모드를 지원할 수 있습니다. package.json 파일을 수정 해봅시다.

"build": "cross-env NODE_ENV=development webpack --progress",
"build:pro": "cross-env NODE_ENV=production webpack --progress"

1. 이제 빌드 시 두 가지 모드로 빌드가 가능합니다. production 빌드 시 결과물이 잘 번들링 되는지 확인 해봅시다.