웹팩 플러그인이란?

이전 시간까지는 로더에 대해서 알아보았다. 이제는 플러그인에 대해서 알아보자!

1. 플러그인?

웹팩에서 가장 마지막 개념이 바로 플러그인이다.

로더는 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다

2. 커스텀 플러그인 만들기

플러그인을 직접 구성해보자. 로더는 함수로 구현했던것과 달리 플러그인은 클래스로 정의한다.

my-webpack-plugin.js:

class MyWebpackPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('My Plugin',stats=> {
      console.log('MyPlugin: done');
    })
  }
}

module.exports = MyWebpackPlugin;

apply함수를 구현하면 되는데 이 코드에서는 인자로 받은 compiler 객체 안에 있는 tap함수를 사용하는 코드다.

webpack.config.js:

const MyWebpackPlugin = require('./my-webpack-plugin');


module.exports = {
  plugins: [new MyWebpackPlugin()],
}

웹팩 플러그인이 잘 동작했다.
파일은 여러개인데 로그는 한 번만 찍혔다.

모듈이 파일 하나 혹은 여러 개에 대해 동작하는 반면 플러그인은 하나로 번들링된 결과물을 대상으로 동작 한다. 예제에서 main.js 결과물이 하나이므로 플러그인이 한번만 동작한다.

번들된 결과에는 어떻게 접근할 수 있을까?
웹팩 내장 플러그인 BannerPlugin 코드를 참고해보자.

my-webpack-plugin.js:

class MyWebpackPlugin {
  apply(compiler) {
    compiler.plugin('emit', (compilation, callback) => {
      const source = compilation.assets['main.js'].source();
      compilation.assets['main.js'].source = () => {
        const banner = [
          '/**',
          ' * 이것은 BannerPlugin이 처리한 결과입니다.',
          ' * Build Date: 2019-10-10',
          ' */'
          ''
        ].join('\n');
        return banner + '\n' + source;
      }

      callback();
    })
  }
}

빌드된 시간이 찍히는 것을 확인할 수 있습니다.

그러나 개발하면서 플러그인을 직접 작성할 일은 별로 없다. 다음 시간에는 자주 사용하는 플러그인을 알아보자.

이 글은 김정환님 블로그를 토대로 작성되었습니다.