210907 개발기록: webpack 플러그인 공부중

• 회사 프로젝트 개발환경 세팅하라는 말에 호다닥 인프런에서 웹팩 강의를 구매했다.
• 그전까지는 개발환경, webpack 같은 말이 낯설고 나랑은 거리가 먼 개념이라 생각했는데, 공부하면 할 수록 더 배워야 한다고 느꼈다.

로더와 플러그인의 차이

• 로더가 파일 단위로 처리하는 반면,
• 플러그인은 번들된 하나의 결과물을 대상으로 처리한다.
• 예제에서 생성된 결과물이 main.js 하나이기 때문에 플러그인이 한 번만 동작한 것이라 추측할 수 있다.

자주 사용하는 플러그인

bannerPlugin

• main.js 의 최상단에 출력될 내용을 작성할 수 있다(like banner)

const childProcess = require('child_process'); // git 명령어를 넣을 수 있다.

plugins: [
    new webpack.BannerPlugin({
        // banner: "이것은 배너입니다."  // 이 내용이 main.js 의 최상단에 출력된다.
        // git 명령어를 넣을 수 있따.(execSync())
        banner: `
            Build Date: ${new Date().toLocaleString()}
            Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
            Author :  ${childProcess.execSync('git config user.name')}
            `
    }),
]

definePlugin

• 개발환경과 운영환경을 나누어 개발할 때, 환경에 따라 api 주소가 다를 수 있다.

• 이런 경우엔 배포할 때마다 코드를 수정하면 휴먼에러가 발생할 수 있다.

• api 주소처럼 환경 의존적 정보는 소스코드가 아닌 다른 곳에서 관리하는 것이 좋다.

• 빌드 타임에 결정되는 환경변수를 어플리케이션 단에 주입하기 위해 사용한다.

• 빌드 타임에 결정된 값을 어플리이션에 전달할 때는 이 플러그인을 사용하자.

plugins:[
    ...
        new webpack.DefinePlugin({
            // TWO: '1+1' // number 출력
            TWO: JSON.stringify('1+1'), // 문자열 출력
            'api.domain': JSON.stringify('http://dev.api.domain.com') // 객체처럼 만들어 출력도 가능하다.
        })
]

HtmlWebpackPlugin (third-party plugin)

• HTML 파일을 후처리하는데 사용한다. 빌드 타임의 값을 넣거나 코드를 압축할수 있다.
• index.html 의 타이틀 부분에 ejs 문법을 이용하는데 <%= env %> 는 전달받은 env 변수 값을 출력한다.

plugins:[
    ...
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            templateParameters: {
                env: process.env.NODE_ENV === "development" ? "(개발용)" : "(운영)"
            },
            // 개발환경에선 작동하지 않도록 삼항 연산 걸어둔다.
            minify: process.env.NODE_ENV === "production" ? {
                collapseWhitespace: true,
                // 공백 제거 => dist/index.html이 공백 제거되기에 한줄로 정리되버린다. 
                // => 이런건 운영에서만 설정해주면 좋다. (개발기에선 한줄로 돼있으면 디버깅하기 어려우니)
                removeComments: true // 주석 제거
            } : false
        })
]

CleanWebpackPlugin (third-party plugin)

• 빌드전, 이전 결과물(대체로 dist 폴더)을 삭제하고, 다시 빌드 폴더를 생성해준다(빌드 폴더의 갱신)

plugins:[
        ...
        new CleanWebpackPlugin(),
]

minicssExtractPlugin (third-party plugin)

• 브라우저에서 큰 파일 하나를 로딩하는 것은 부담스럽다.

• 여러개의 작은 파일을 동시에 다운로드 하는 것이 더 빠르다(=> css 파일을 여러개 만들어 역할 에 따라 분리)

• javascript 에서 css 를 뽑아내기 때문에, 개발환경에선 굳이 사용할 필요없는 플러그인.

• 개발환경에선 자바스크립트 파일 하나로 빌드하는 것이 더 빠르기 때문이다.

• 정리하자면, 스타일시트는 빌드과정에서 javascript 파일로 컴파일되는데,
  스타일시트가 많아지면 하나의 javascript 파일의 크기가 비대해진다.

• 이런 상황을 면하고자, 번들 결과에서 스타일시트 코드만 뽑아 별도의 css 파일로 만들어 역할에 따라 분리하는 것.

plugins:[
    ...(process.env.NODE_ENV === 'production'
        ? [new MiniCssExtractPlugin({filename: '[name].css'})]
        : [])
]

정리

엔트리포인트를 시작으로 연결되어 었는 모든 모듈을 하나로 합쳐서 결과물을 만드는 것이 웹팩의 역할이다.
자바스크립트 모듈 뿐만 아니라 스타일시트, 이미지 파일까지도 모듈로 제공해 주기 때문에 일관적으로 개발할 수 있다.