プラグインの使用方法

このサイトは作成途中のものを公開しています。 また、Webpackのバージョンが1.13.0の頃に作成されたものですが、2017年2月現在Webpackは1系を非推奨として2の使用を勧めています。

webpackのバンドルに関係する機能を追加するのに、プラグインを使用します。 例えばBellOnBundlerErrorPluginは、 バンドラーのビルド処理のエラーを通知してくれます。

組み込みプラグイン

プラグインは、webpackの設定の中でpluginsプロパティを使用して、あなたのモジュールに含まれます。

// webpackはnode_modulesディレクトリ内にあるはずです。無ければ、インストールして下さい。
var webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.ResolverPlugin([
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ], ["normal", "loader"])
    ]
};

その他のプラグイン

組み込みでは無いプラグインは、npm上で公開されていればnpmを使用して、または別の何らかの方法でインストールすることが出来るでしょう。

npm install component-webpack-plugin

このようなプラグインは次のようにして使用します。

var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
    plugins: [
        new ComponentPlugin()
    ]
}

npm経由でサードパーティのプラグインをインストールする場合には、このツールを使用することをお勧めします。
https://www.npmjs.com/package/webpack-load-plugins

このツールは、インストールされている全ての3rdパーティ製のプラグインを調べ、必要なときに遅延読み込み(lazyload)を行います。

参照

  • プラグイン一覧

 Back to top

© 2010 - 2017 STUDIO KINGDOM