[webpack] webpack 2 入門: まとめと目次

公開日: 2017/06/11
更新日: 2018/10/03

何度かに分けて webpack を調査した記事のまとめと目次です。

Contents

この連載記事のゴール

以下の機能を yarn/webpack で組み立てます。

  • JavaScript … JS bundle, Babel
  • CSS … Sass, PostCSS
  • Lint … ESLint
  • Server … webpack-dev-server

これらは Middleman, _S(Iemoto) への適用を想定するなど、筆者の個人的な要件に沿っています。
そのため、ここでは以下の技術には触れません。

  • Task Runner … Grunt, gulp etc.
  • Templating … Jade, Handlebars etc.
  • Test … mocha etc.
  • Frameworks … React, AngularJS etc.

但し、将来的に採用技術が変わることもあり得ますので、他の環境でも応用できるよう分かりやすい単位で分割しました。

ソースと対応バージョン

後で参照しやすいように、成果物は下記に上げました。
また各記事にも、そこまでの差分へのリンクがあります。

対応バージョンは、以下の通りです。

% yarn --version
0.24.6
% $(yarn bin)/webpack --version
2.6.1

目次

チュートリアル形式となっているので、順を追って進めると概要が把握できるようにまとめています。
単体で取り出してもほぼ機能するはずです。

  1. bundle の仕組み
  2. debug, sourcemap, uglify, watch
  3. babel による JavaScript のトランスパイル
  4. eslint-loader で ESLint する
  5. HtmlWebpackPlugin を利用して表示 HTML を自動生成する
  6. CSS や image を bundle する
  7. ProvidePlugin で依存するライブラリを autoload する
  8. Extract Text Plugin で CSS ファイルを出力する
  9. sass-loader で scss ファイルを扱う
  10. postcss-loader で PostCSS plugin を利用する
  11. webpack-dev-server で LiveReload & Watch 対応のサーバをたてる
  12. まとめと目次

参考ソース・補足情報

公式

現在のバージョンは webpack 2 となっています。
ネット上の少し古めの情報は v1 のことが多く、微妙に違う部分があるので注意が必要です。

そしてこれらの記事のポスト中に v3.0.0 RC のアナウンス がありました。

アウトラインをつかむためのポイント

取り組み始めた当初は webpack の特徴をつかんでおらず混乱していました。
こちらの記事を読むことで理解が進みました。

  • webpack は、JavaScript も CSS も image なども含め「 全てのデータを JavaScript の module として扱い、これらを bundle する 」という振る舞いが基本である。
  • Loader は、ECMAScript2015 や Sass など「 webpack が扱える形式を増やしたい 」場合に利用される。
  • Plugin は、ファイル出力など「 それ以外の機能を差し込みたい 」場合に利用される。

解釈に間違いがあればごめんなさい。
ちなみに loader 間のデータの受け渡しは、JSON 形式だそうです。

ドキュメントの読み方

公式のドキュメントやネット上の情報を調べると、書き方がまちまちで混乱することがありました。
v1 -> v2 の読み替えや webpack.config.js の記述にあたり、こちらの情報が大変参考になりました。

（なかのひとでした。ありがとうございました。）

所感