[webpack]첫회 빌드시 통지하는 플러그인을 만들어 보았다!

소개

webpack의 빌드 완료시에 통지해 주는 라이브러리로 webpack-build-notifier등이 있습니다만, 본 느낌 첫회 빌드만은 없었으므로, 이번은 node-notifier를 사용해, 첫회 빌드시에 통지해 주는 webpack의 플러그인을 만들어 보았습니다!
webpack의 간단한 설정등은 끝나고 있는 전제로 진행해 갑니다.

이하의 사이트를 참고로 했습니다.
node-notifier
간단한 Webpack 플러그인을 만들고 Webpack과 친숙합니다 (빌드 시간 정보를 console.log에 표시)

설치

데스크톱 알림을 제공하는 node-notifier를 설치합니다.

## npm
npm install node-notifier

## yarn
yarn add node-notifier

플러그인 만들기

적절한 이름으로 파일을 만듭니다. 이번은 first-build-plugin.js 라는 이름으로 했습니다.

first-build-plugin.js

const notifier = require('node-notifier');

module.exports = class FirstBuildPlugin {
  constructor() {
    this.is_build = false;
  }

  apply(compiler) {
    compiler.hooks.done.tap('FirstBuildPlugin', () => {
      if (!this.is_build) {
        notifier.notify({
          title: 'webpack',
          message: 'ビルドが完了しました！',
          sound: 'Ping',
        });
        this.is_build = true;
      }
    });
  }
};

webpack에서 plugin을 참조 할 때 apply라는 것이 실행되고 apply는 compiler를 인수로 취합니다.

compiler 로부터 액세스 할 수 있는 hooks 로 실행 타이밍을 설정할 수가 있습니다.done 는 컴파일 완료시에 불려 가는 hooks 입니다.

그래서, 그 안에 node-notifier의 통지의 기술을 하고 있습니다만, 이대로라면 빌드시에 매회 통지가 와 버리므로 if문으로 첫회만이 되도록(듯이) 하고 있습니다.

title, message에서 알림 메시지를, sound에서 알림 온을 설정하고 있습니다. 다른 아이콘으로 이미지를 설정할 수 있습니다. 자세한 내용은 node-notifier의 github 페이지를 참조하십시오.

플러그인 로드

webpack의 설정 파일로 읽어들입니다.

webpack.config.js

// 〜　省略　〜　他のライブラリなどインポート
const FirstBuildPlugin = require('./first-build-plugin.js'); // ファイル名や場所によって変えてください

module.exports = {
// 〜　省略　〜　設定など
  plugins: [
    // 〜　省略　〜　他のプラグインなど
    new FirstBuildPlugin(),
  ]
};

// 〜　省略　〜

다음 명령을 실행합니다.

webpack --watch

↓이런 느낌으로 표시됩니다!

끝에

여기까지 읽어 주셔서 감사합니다! 이 기사가 조금이라도 도움이되면 기쁩니다!
처음 빌드뿐만 아니라 매번 표시하고 싶은 경우는 webpack-build-notifier에서 바로 사용할 수 있으므로 추천합니다.
webpack5가 조금 전에 출시되었으므로보고 싶습니다 ~