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

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

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

[markdown]
## この連載記事のゴール

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

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

これらは [Middleman](https://www.d-wood.com/blog/tag/middleman), [_S](https://www.d-wood.com/blog/tag/_s)([Iemoto](https://www.d-wood.com/blog/tag/iemoto)) への適用を想定するなど、筆者の個人的な要件に沿っています。
そのため、ここでは以下の技術には触れません。

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

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

## ソースと対応バージョン

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

> * [DriftwoodJP/sandbox-webpack: webpack tutorial example sources.](https://github.com/DriftwoodJP/sandbox-webpack)

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

“`prettyprinted
% yarn –version
0.24.6
% $(yarn bin)/webpack –version
2.6.1
“`

## 目次

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

1. [bundle の仕組み](https://www.d-wood.com/blog/2017/05/29_8991.html)
1. [debug, sourcemap, uglify, watch](https://www.d-wood.com/blog/2017/06/01_8997.html)
1. [babel による JavaScript のトランスパイル](https://www.d-wood.com/blog/2017/06/02_8999.html)
1. [eslint-loader で ESLint する](https://www.d-wood.com/blog/2017/06/02_9003.html)
1. [HtmlWebpackPlugin を利用して表示 HTML を自動生成する](https://www.d-wood.com/blog/2017/06/05_9005.html)
1. [CSS や image を bundle する](https://www.d-wood.com/blog/2017/06/06_9007.html)
1. [ProvidePlugin で依存するライブラリを autoload する](https://www.d-wood.com/blog/2017/06/06_9020.html)
1. [Extract Text Plugin で CSS ファイルを出力する](https://www.d-wood.com/blog/2017/06/07_9023.html)
1. [sass-loader で scss ファイルを扱う](https://www.d-wood.com/blog/2017/06/08_9026.html)
1. [postcss-loader で PostCSS plugin を利用する](https://www.d-wood.com/blog/2017/06/08_9029.html)
1. [webpack-dev-server で LiveReload & Watch 対応のサーバをたてる](https://www.d-wood.com/blog/2017/06/09_9033.html)
1. [まとめと目次](https://www.d-wood.com/blog/2017/06/11_9041.html)

## 参考ソース・補足情報

### 公式

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

> * [webpack](https://webpack.js.org/)
> * [webpack – github](https://github.com/webpack)

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

> * [Release v3.0.0-rc.1 · webpack/webpack](https://github.com/webpack/webpack/releases/tag/v3.0.0-rc.1)

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

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

> * [【意訳】Webpackの混乱ポイント – Qiita](http://qiita.com/chuck0523/items/caacbf4137642cb175ec)
> * [なんとなくで理解しないWebpackのCSS周辺 – Qiita](http://qiita.com/inuscript/items/0574ab1ef358fecb55b9)

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

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

### ドキュメントの読み方

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

> * [webpack2へ移行する軽いメモ – 技術探し](http://abouthiroppy.hatenablog.jp/entry/2017/02/03/212817)

（[なかのひと](https://github.com/abouthiroppy)でした。ありがとうございました。）

## 所感


[/markdown]