웹팩 빌드 후에 다른 작업 실행하기

Webpack으로 빌드한 최신 파일은 설정을 통해 내가 원하는 경로에 넣을 수 있습니다.

그렇게 사용하던 도중, 그 파일을 다시 복사해 다른 경로에도 배포해야 할 일이 생겼습니다.

검색 실력이 모자라서 그런건지 기본 설정으로 처리하는 방법은 찾지 못했습니다.

결국 Webpack의 플러그인과 추가 별도의 js 파일로 처리하게 되었습니다.

핵심은 빌드가 끝난 후, 자동으로 다음 작업을 하는 것입니다.

그래서 찾은 게 Webpack Shell Plugin 입니다. 이 플러그인을 사용하면 빌드 후에 간단한 커맨드 명령어를 실행할 수 있습니다.

plugins: [
    new WebpackShellPlugin({
        onBuildEnd: ['node ' + path.resolve(__dirname, 'buildFileCopy.js')]
    })
]

Webpack의 plugins 설정에 빌드가 끝나면 별도로 만든 `buildFileCopy.js`파일을 nodejs로 실행하도록 했습니다.

`buildFileCopy.js` 파일 안에는 저에게 필요한 간단한 파일 복사 기능을 만들어 두었습니다.

const path = require('path');
const copy = require('copy');

const RESET = "\x1b[0m";
const FG_RED = "\x1b[31m";
const FG_GREEN = "\x1b[32m";

const src = path.resolve(__dirname, 'dist/*.js');
const dest = path.resolve(__dirname, 'docs/js');

copy(src, dest, (err) => {
    if (err) {
        console.log(FG_RED);
        console.log(err);

    } else {
        console.log(FG_GREEN);
        console.log('copy complete');
    }

    console.log(RESET);
});

지금은 복사 뿐이지만 상황에 따라 자신이 원하는 후속 처리를 할 수 있습니다.