コンパイラかく語りき

import { Fun } from 'programming'

非公式Webpackチュートリアル その3

前回は、最小構成でのWebpackの利用を学びました。

 

chuckwebtips.hatenablog.com

 

今回はWebpackチュートリアルの第3回目。プラグインの使用について学びます。

 

github.com

 

プラグインの使用

今回はファイルを圧縮するUgilifyJSPluginを使用します。

configファイルは以下のようになります。

giste0920b99373550822835

 

pluginsという要素が新しく登場しましたが、これは使用するプラグインを格納する配列です。

また、今回はUgilifyJSPluginを用いましたが、他にはOrderOccurencePluginのようなプラグインもあります。モジュールに振るIDを、モジュールの登場頻度にそって振ってくれるとか。

ちなみに、このプラグインはWebpack2ではデフォルトで内包されるようです。なのでWebpack1でもその仕様に従うならば、configファイルは以下のようになります。

 

gistaf38174687563c939903

 

 

バンドル比較

蛇足ではありますが、生成されたバンドルファイルの比較をしておきます。

こちらが非圧縮。

gist5c907f50198e470372b0

 

こちらが圧縮済み。

gist74c7792496845db47d47

 

 

まとめ

というわけで、プラグインを導入する方法を学びました。

基本的にはconfigに書けばOKですね。あとは、各プラグインの用法をその都度学んでいく感じですね。

 

今回作成したファイルはこちらから。

github.com