Webpack 공식 홈페이지 따라하기 (6) - Plugins

 

Plugins은 로더가 할 수 없는 다른 작업을 수행할 목적으로 제작되었다.

 

1. Anatomy

webpack 플러그인은 apply 메서드를 가지고 있는 객체이다

apply 매서드는 webpack 컴파일러에 의해 호출되며, 전체 컴파일 라이프사이클에 접근할 수 있다.

*apply :  수신 객체의 함수를 사용하지 않고 수신 객체 자신을 다시 반환 하려는 경우에 apply 를 사용

 

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

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

module.exports = ConsoleLogOnBuildWebpackPlugin;

 

모든 훅에서 재사용 할 수 있도록 하기 위해서 상수를 사용하는 것이 좋다.

 

2. Usage

플러그인은 매개변수 및 옵션을 사용할 수 있으므로, webpack 설정에서 plugins 속성에 새로운 인스턴스를 전달해야 한다.

3. Configuration

const HtmlWebpackplugin = require('html-webpack-plugin');
const webpack = require('webpack'); //빌트인 플러그인에 접근하기 위함
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' }),
    ],
}

 

ProgressPlugin은 컴파일하는 동안 리포트를 사용자 정의로 생성할 수 있으며 HtmlWebpackPlugin은 script를 사용하여 my-first-webpack.bundle.js 파일을 포함하는 HTML 파일을 생성한다.

 

4. Node API

Node API를 사용할 때 설정의 플러그인 속성을 통해 플러그인을 전달 할 수도 있다.

const webpack = require('webpack'); //webpack 런타임에 접근하기 위함
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);

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

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