読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

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

WebPack

今日からWebpackのチュートリアルを何回かに分けて消化していきます。

消化するのはこちらのチュートリアル

github.com

公式ではなく、有志によるチュートリアルです。

主にBabelやES2015をガリガリ使っていく前提で書かれているので、かなり有用なチュートリアルだと思われます。

 

それとなく意訳しつつ、自分のローカル環境でもチュートリアルの内容を再現していこうと思います。

 

Example 1 バンドルとローダー

まずはWebpackのモジュールバンドラとローダーとしての側面を見ていきましょう。

最初は単一のエントリーポイントを設定して作業していきます。

 

用意したファイル

index.jsというファイルをエントリーポイントとして、必要なモジュールをrequireします。

gist113a6e57f426970241fd

 

index.jsがrequireするモジュールは以下のとおりです。

gist113a6e57f426970241fd

 

gistdeb0155f59db085b6cca

 

gistdc91d6382a07020c863c

 

バンドル

バンドルは以下のコマンドで実行します。

$ webpack -c index.js bundle.js

 

その結果、モジュールがバンドルされたbundle.jsというファイルが生成されます。

以上、一番最初のシンプルな例でした。

 

github

今回作成したレポジトリはこちら。

github.com

 

チュートリアル

消化したチュートリアルがこちらでした。

github.com