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

コンパイラかく語りき

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

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

WebPack

非公式Webpackチュートリアルのその2です。

前回の記事がこちら。 

chuckwebtips.hatenablog.com

 

今回消化するチュートリアルはこちらです。

github.co

 

最小構成例

前回はバンドラとローダーという俯瞰的な例でしたが、今回からは具体的なチュートリアルに入っていきます。

第二回のチュートリアルは最小構成でのチャレンジとなります。

 

まずファイル構成はこんな感じ。

f:id:chuck0523:20160216022606p:plain

 

そして、Webpackの設定ファイルであるwebpack.config.jsは以下のとおり。

gistdc91d6382a07020c863c

 

つまり、webpackコマンドを走らせたら、src/index.jsがビルドされて、dist以下にbundle.jsとして生成されますよーといった感じ。

 

以上、これが最小構成でのwebpackのサンプルでした。

 

pathとは

余談ですが、webpackで頻出するpathについて調べてみました。

このモジュールはファイルパスを扱うユーティリティを含みます。 利用するにはrequire('path')を呼び出してください。 

path - Node.js v0.4.12 Manual & Documentation

 

へー。

configのpath.join(__dirname, 'hoge')あたりがpathを使用している箇所ですね。

「joinとは、与えられた引数を1つに結合して、得られるパスを正規化する」らしいです。

へー。

 

 

github

今回作成したディレクトリはこちら。

github.com

 

チュートリアル

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

github.co

 

次回はその3です〜