webpack 개념 5.플러그인 Plugins

플러그인 Plugins

플러그인은 웹팩의 중추이다. 웹팩 자체는 웹팩 구성에서 사용하는 동일한 플러그인 시스템으로 설계된다. 또한 로더가 할 수 없는 일들을 수행할 수 있다.

구조

웹팩 플러그인은 apply 메소드를 가지고 있는 자바스크립트 객체다. 이 apply 메소드는 웹팩 컴파일러에 의해 호출 되며, 엔트리 컴파일 라이프사이클에 접근 할 수 있도록 한다.

ConsoleLogOnBuildWebpackPlugin.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, compilation => {
      console.log('The webpack build process is starting!!!');
    });
  }
}

컴파일러 hook의 tab 메소드의 첫번째 파라미터는 카멜 표기법으로 된 플러그인 이름이다. 재사용할 수 있도록 상수 선언하는 것을 권장한다.

사용법

플러그인은 인자와 옵션을 사용할 수 있으므로, plugins 속성에 new 인스턴스를 전달해야 한다. 어떻게 웹팩을 사용하느냐에 따라 플러그인 사용법은 여러가지가 될 수 있다.

구성 Configuration

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

Node API

Node API를 사용하는 경우에도 plugins 속성에 플러그인을 전달할 수 있다.

some-node-script.js

const webpack = require('webpack'); //to access webpack runtime
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);

new webpack.ProgressPlugin().apply(compiler);

compiler.run(function(err, stats) {
  // ...
});

위의 예제는 웹팩 런타임과 매우 유사하다. 웹팩 소스 코드에는 사용자 설정과 스크립트를 적용할 수 있는 많은 예제들이 숨어있다.

출처 : https://webpack.js.org/

개념

webpack 개념 0.Concepts

webpack 개념 1.엔트리 포인트 Entry Points

webpack 개념 2.아웃풋 Output

webpack 개념 3.모드 Mode

webpack 개념 4.로더 Loaders

webpack 개념 5.플러그인 Plugins

webpack 개념 6.설정 Configuration

가이드

webpack 강좌 1 : 설치

webpack 강좌 2. 시작하기

webpack 강좌 3. 에셋(자산) 관리 (Asset Management)

webpack 강좌 4. 결과물(Output) Management

webpack 강좌 5. 개발 Development

webpack 강좌 6. 핫 모듈 리플레이스먼트 Hot Module Replacement