🔧Webpack : Plugin

 플러그인은 번들된 결과 하나만을 처리한다. 번들된 js를 난독화 한다거나 특정 텍스트를 추출하는 용도록 사용한다. 

---

My-Webpack-Plugin

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

module.exports = MyWebpackPlugin;

위와 같이 플러그인을 커스텀 할 수 있다.

1. class MyWebpackPlugin : Webpack 플러그인은 일반적으로 클래스 형태로 정의해야 된다.

2. apply(compiler) { ... } : Webpack 플러그인은 apply 메서드를 가져야 한다. apply 메서드는 Webpack이 플러그인을 사용할 때 호출되며 이 메서드는 Webpack의 compiler 객체를 인수로 받아 컴파일러와 빌드 프로세스 중 발생하는 여러 이벤트에 접근할 수 있게 해준다.

3. compiler.hooks.done.tap('MyWebpackPlugin', stats => { ... }) : 이 줄은 Webpack의 done 훅(hook)을 사용하여 빌드가 완료된 후 실행되는 작업을 정의한다.

• compiler.hooks.done: Webpack의 done 훅은 컴파일이 완료되었을 때 실행된다.
• tap('MyWebpackPlugin', stats => { ... }): 이 메서드는 특정 훅에 함수를 등록(tap)한다. 첫 번째 인수는 플러그인의 이름이며 두 번째 인수는 빌드가 완료된 후 실행될 콜백 함수입니다.
  • 'MyWebpackPlugin': 등록된 함수의 이름으로, 디버깅 및 로깅 시 유용하다.
  • stats => { ... }: 콜백 함수로, stats 객체는 컴파일 결과에 대한 정보를 담고 있다. 이 함수는 빌드가 완료된 후 실행된다.

Plugin이 번들 결과에 접근할 수 있는 이유는 웹팩 내장 플러그인인 BannerPlugin을 통해서 접근할 수 있는 것이다. 이를 참조해서 코드를 다시 커스텀 해보자.

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

      callback();
    })
  }
}

module.exports = MyWebpackPlugin;

위와 같이 코드를 작성하고 build를 하게 되면 error가 발생한다. 그 이유는 `compiler.plugin`이라는 명령어가 webpack5에서는 사용되지 않고 삭제가 되었기 때문이다. 그렇다면 webpack5를 기준으로 올바른 코드를 작성해보면 아래와 같다.

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

      callback();
    })
  }
}

module.exports = MyWebpackPlugin;

 `compiler.plugin` 이라는 코드를 대신해서 이렇게 코드를 `compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback)`를 이용하면 정상적으로 build가 되는 것을 확인 할 수 있다. 이제 `console.log(source)`의 결과를 보면 아래와 같다.

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/        "use strict";
/******/        var __webpack_modules__ = ({

/***/ "./.yarn/__virtual__/css-loader-virtual-16d7c22a15/0/cache/css-loader-npm-6.11.0-d945f9f4c0-bb52434138.zip/node_modules/css-loader/dist/cjs.js!./src/app.css":
/*!*******************************************************************************************************************************************************************!*\
  !*** ./.yarn/__virtual__/css-loader-virtual-16d7c22a15/0/cache/css-loader-npm-6.11.0-d945f9f4c0-bb52434138.zip/node_modules/css-loader/dist/cjs.js!./src/app.css ***!
  \*******************************************************************************************************************************************************************/
/***/ ((module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, 
/* -- 이하생략 -- */

결과를 보면 build된 main.js와 일치한다는 것을 알 수 있다. 이렇게 BannerPlugin과 유사하게 동작 할 수 있게 코드를 작성해 보았다. 이제 방금 작성한 코드에서 주석으로 처리가 되어 있는 코드를 활용해 build된 결과를 다시 살펴보자. 주석을 처리하고 build를 하면 정상적으로 build는 되지만 main.js에 우리가 작성한 주석이 적용되지 않은 것을 볼 수 있다. 이에 webpack 공식문서를 찾아가보며 gpt와 함께 이를 해결 했다. 수정된 코드는 아래와 같다.

class MyWebpackPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('MyWebpackPlugin', (compilation, callback) => {
      console.log('This is an example plugin!');
      const source = compilation.assets['main.js'].source();
      const banner = ['/* This is an example plugin! */'].join('\n');
      const updatedSource = banner + '\n\n' + source;
      // 수정된 소스를 assets에 다시 설정
      compilation.assets['main.js'] = {
        source: () => updatedSource,
        size: () => updatedSource.length
      };
      console.log('Banner added to main.js');
      callback();// 비동기 작업이 완료되었음을 알림
    })
  }
}

module.exports = MyWebpackPlugin;

이전 버전 방식인 return을 사용했던 방법과 달리 webpack5에서는 key, value처럼 객체화해서 값을 넘겨주니 정상적으로 동작하는 것을 확인 할 수 있었다. complication은 객체는 Webpack이 모듈을 분석하고 번들링하는 과정에서 사용되며 각 모듈과 파일이 어떻게 처리되고 연결되는지에 대한 정보를 저장한다.

강의 커뮤니티를 보니 많은 수강생들이 업데이트를 해달라고 하곤 있지만 그 시간을 기다릴 수 없어서 공식문서와 gpt를 사용해서 충분히 해결 할수 있었다. 아래 이미지는 webpack이 전반적으로 어떻게 동작하는지를 시각적으로 표기해본 이미지이다. 몇몇 정보들을 빼놓긴 했지만 어떤 느낌인지 알 것이다.

당연히 entry는 먼저 설정이 되어 있을 것이다.

Writing a Plugin | webpack