webpack4 커스텀 두번째 이야기 그리고 git hook 을 이용한 자동화

안녕하세요 Lovefield 입니다.

저번글인 webpack4 기본 설정 그리고 커스텀 에 이어서 이번글에서는 오류 해결과 git hook을 이용한 자동화에 관해 서술하려 합니다.

1. 위치변경

우선 이전 글에서 npm i -g webpack webpack-cli를 통해 글로벌로 설치했던 webpack 을 프로젝트 폴더로 옮겨야합니다.

설치 위치가 달라서인지 자꾸 꼬이면서 에러를 내더라고요.

npm rm -g webpack webpack-cli
npm i webpack webpack-cli

위의 커멘드라인을 차례로 실행해 위치를 변경해줍니다.

그리고 커스텀을 위해 만들었던 build.js 파일을 수정해줍니다.

const { spawn } = require('child_process');

var proc_webpack = spawn('node', ['./node_modules/webpack/bin/webpack.js'], {encoding : 'utf8', env:{'WP_DIRECTORY': process.argv[2]}});
proc_webpack.stdout.on('data', (str) => {
console.log(''+str);
});
proc_webpack.stderr.on('data', (data) => {
console.log(`stderr: ${data}`);
});

기존 cmd를 실행하던 명령어를 node 명령어로 webpack.js 파일을 실행하도록 변경했습니다.

2. git hook을 이용한 자동화

필자는 git 환경에서 webpack을 자동화할 필요가 있었습니다.

일일이 작업한 폴더를 압축해서 add 해서 commit 하기엔 너무나도 귀찮았지요.

그래서 마침 git에서 제공하는 hook중 commit 명령어에 반응해 commit전에 실행되는 pre-commit을 이용했습니다.

.git/hooks/pre-commit.sample

기본적으로 위의 파일이 있을 텐데요.

내용을 다음과 같이 수정해줍니다.

#!/bin/sh
# 위의 명령어는 쉘을 사용하겠다는 명령어입니다.

dir=$(git diff --exit-code --cached --name-only --diff-filter= -- '*.css' '*.js')
# git diff를 통해 변경된 파일들에 대한 경로를 가져오며 css와 js의 경로만 가져옵니다.

dirs=`echo -e ${dir}| sed -e "s/[[:space:]]/\n/g" | cut -f 1 -d '/' | sort | uniq`
# 상위 폴더명을 따오며 겹치는 폴더명을 제외합니다.

for name in ${dirs}; do # 상위 폴더명 개수만큼 실행합니다.
	echo "--- doing $name folder minify ---"
	echo `node build.js "$name"`
done

echo `git add .`
# 새로 생성된 파일을 add 해줍니다.

그리고서 파일명에서 .sample을 제거해주면 작동하는데요.

git commit을 실행 시 변경된 폴더의 css와 js를 가져와 압축하게 됩니다.

하지만 css나 js가 변경되지 않을 경우 압축은 실행되지 않지요.

3. ES6 사용하기

사실 별생각 없었습니다만 내부에서 ES6를 사용하면 어떻겠냐 라는 이야기 나와서 webpack에서 ES6를 ES5로 변환해주는 기능을 추가했습니다.

npm i babel-core babel-preset-env

변환을 위해 babel을 설치해줍니다.

그리고 webpack.config.js 의 module 부분의 rules를 다음과 같이 수정합니다.

rules : [
    {
        test : /\.css$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
        ]
    },
    {
        test : /\.js$/,
        use : {
            loader : 'babel-loader',
            options : {
                presets : ['env']
            }
        }
    }
]

위의 css부분은 이전 글에서 작성한 그대로입니다.

하단에 js 영역을 추가해줬구요.

자 그럼 이제 압축된 녀석은 ES5로 변환되는 걸 확인 하실 수 있습니다.