Webpack - 웹팩 Plugins (5)
지난 포스트에 이어서 웹팩의 구성 요소인 Plugin에 대해서 알아보도록 하겠습니다.
Plugin
플러그인은 웹팩의 중추입니다.웹팩 자체는 웹팩 구성에서 사용하는 것과 동일한 플러그인 시스템에 구축됩니다.
또한 로더가 할 수 없는 다른 작업을 수행할 목적으로도 사용됩니다.
자세히 살펴보기
웹팩 플러그인은 적용 메소드가 있는 javascript 객체입니다. 이 apply 매소드는 전체 컴파일 라이프 사이클에 대한 엑세스를 제공하는 웹팩 컴파일러에 의해 호출됩니다.
// ConsoleLogOnBuildWebpackPlugin.js
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log('The webpack build process is starting!!!');
});
}
}
module.exports = ConsoleLogOnBuildWebpackPlugin;
컴파일러 후쿠의 웹 매소드의 첫 번째 매개 변수는 플러그인 이름의 Camelized(여러 단어로 구성된 변수 또는 객체 이름) 버전이어야 합니다.
사용법
플러그인은 arguments/options(인수/옵션)을 사용할 수 있으므로 웹팩 구성의 plugin 속성에 새 인스턴스를 전달해야합니다.
웹팩을 사용하는 방법에 따라 플러그인을 사용하는 여러가지 방법이 있습니다.
설정
// 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) {
// ...
});
안내
위에서 본 예제는 웹팩 런타임 자체와 매우 유사합니다. 웹팩 소스 코드에 사용장가 정의하는 윕팩 구성 및 스크립트에 적용할 수 있는 훌륭한 사용 예제가 많이 숨어있습니다.
Leave a comment