webpackの入門記事を揃えています

モジュールバンドラーのwebpackの入門記事をICS MEDIAやQiitaに用意しました。@tonkotsuboy_com の記事も合わせて最新版のwebpackに対応させています。

• 最新版で学ぶwebpack入門 – ICS MEDIA
• Babel+webpackでES2015+の環境構築 – ICS MEDIA
• TypeScript+webpackの環境構築 – ICS MEDIA
• スタイルシート(CSSやSass)+webpackの環境構築 – Qiita
• Gulpで始めるwebpack 3入門 – Qiita

JavaScriptのモジュールシステムの過渡期にはCommonJSやAMDなど独自性の強いものがありましたが、標準のECMAScript 2015のModules(これをES Modulesと呼んだりESMとも呼んだり)が一般化してきました。webpack 2+ではESMのモジュールバンドルに標準対応しています。

webpackの強みはESMをバンドルする時に、Tree Shakingが使えること。ウェブのフロントエンド界隈の勉強会で議論すると、Browserifyは旧世代のツールでTree Shakingが効かないことで今の時代はまず使わない、使うとしたらwebpackかRollup.js。Rollup.jsはJSライブラリ向けで、一般的なプロジェクトではwebpackを使うということで意見が一致することが多いです。

Tree Shakingはコンパイル時に未使用のモジュールを除外してくれます。これって、ActionScript 3.0のコンパイラようなイメージ。ActionScript 3.0が10年以上前に実現していたことがようやく2017年になってJavaScriptでもできるようになってきた印象です。