[인프런] 프론트엔드 개발환경의 이해와 실습 (플러그인)

플러그인이 무엇이고, 웹팩에서 플러그인이 어떻게 사용되는지 알아보자.

플러그인

플러그인은 번들된 결과물 하나를 처리한다. 번들된 자바스크립트를 난독화하거나 특정 텍스트를 추출하는 용도로 사용한다. 로더가 하나의 파일에 한 번씩 작동했다면, 플러그인은 번들된 결과물이 하나이기 때문에 한 번만 작동한다.

플러그인 동작 원리

동작 원리를 이해하기 위해 로더를 직접 작성해보자.

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() 함수를 사용한다는 뜻이다. 플러그인 작업이 완료되는 시점(done)에 로그를 찍는 코드이다.

 

플러그인을 사용하기 위해 웹팩 설정 파일에 추가해준다.

webpack.config.js

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

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

클래스로 제공되는 플러그인의 생성자 함수를 실행해서 plugins 배열에 넘기는 방식이다.

 

npm run build로 빌드해보면 다음과 같이 로그가 찍힌 것을 확인할 수 있다. 플러그인이 동작했다는 의미이다.

MyWebpackPlugin이 실행된 것을 알 수 있음

 

번들 결과에 접근하는 방법을 알아보자. 웹팩 내장 플러그인 BannerPlugin 코드를 참고하자.

my-webpack-plugin.js

class MyWebpackPlugin {
    apply(compiler) 
      compiler.hooks.emit.tapAsync('emit', (compilation, callback) => {
        const source = compilation.assets['main.js'].source();
        console.log(source);
  
        callback();
      })
    }
}

module.exports = MyWebpackPlugin;

emit 이벤트가 발생하면 콜백함수가 실행된다. 번들링된 결과는 compilation 객체에 들어 있는데, compilation.assets['main.js'].source() 함수로 접근할 수 있다. 그래서 로그를 찍어보면 번들링된 코드를 볼 수 있게 된다.

 

번들링된 main.js가 로그로 찍힘

---

출처: [인프런] 프론트엔드 개발환경의 이해와 실습