Plugins
Plugins are the backbone of webpack. webpack itself is built on the same plugin system that you use in your webpack configuration!
プラグインはwebpackのバックボーンであり、webpack自体はwebpackと同じように設定されたプラグインのシステムの上に構築されています。
They also serve the purpose of doing anything else that a loader cannot do.
また、ローダーではできないことをする目的もあります。
Anatomy
A webpack plugin is a JavaScript object that has an apply method. This apply method is called by the webpack compiler, giving access to the entire compilation lifecycle.
The first parameter of the tap method of the compiler hook should be a camelized version of the plugin name. It is advisable to use a constant for this so it can be reused in all hooks.
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log('The webpack build process is starting!!!');
});
}
}
module.exports = ConsoleLogOnBuildWebpackPlugin;
コンパイラーフックのtapメソッドの最初のパラメータは、プラグイン名をキャメル化したものでなければなりません。 すべてのフックで再利用できるように、thisには定数を使うことをお勧めします。「すべてのフックで再利用できるようにするためです。
Since plugins can take arguments/options, you must pass a new instance to the plugins property in your webpack configuration.
Usage
プラグインは引数やオプションを取ることができるので、webpack設定のpluginsプロパティに新しいインスタンスを渡す必要があります。
Depending on how you are using webpack, there are multiple ways to use plugins.
webpackの使い方によって、プラグインを使う方法は複数あります。
webpackをどのように使うかによって、プラグインを使う方法がいくつかあります。
構成
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
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) {
// ...
});
Did you know: The example seen above is extremely similar to the webpack runtime itself! There are lots of great usage examples hiding in the webpack source code that you can apply to your own configurations and scripts!
ご存知だろうか？: 上の例を見ていると、webpackが自分自身を実行しているようによく似ている。ここでは、webpackのソースコードにまだ隠されていない、独自の設定やスクリプトを実行できる使用例を紹介する。
