最近インターンを始めさせていただいたのですが、その中で
今までなんとなく聞いたことあったけど理解してこなかった知識がバババッ！！と繋がってきました。
そこで、アウトプットするとともに、同じようにプログラミング初めてなんとなく理解し初めてきたけど、
もう１歩という人がなんとなく理解できるように知見を、通勤、通学中の電車や休憩時間の5分くらいでインプットできるような記事を共有していきたいと思います。
第１回はWebpack入門です！

Webpackとは

Webpackとは、簡潔言うと、複数のファイルを１つにまとめてくれるものです。
最も多い使用の仕方は、JavaScriptファイルをバンドルすることですが、他にもcssや画像ファイルなどもまとめることができます。

なんでファイルを１つにまとめると嬉しいの？

ファイル取得時間

複数のjs,css,画像ファイルなどを１つにまとめることによって、通信の際にファイル取得時間を短縮できます。

環境ごとに実行ファイルを分けることができる

例えば、同じソースコードからwebブラウザで動く用のjsファイルと、nodeサーバーで動く用のjsファイルなど使用する環境に応じて異なった出力をすることができます。
こうすることによって、そのサービスを複数の環境で提供することを容易になります。

plugin

webpackには豊富なプラグインが用意されています。
例えば、出力ファイルの圧縮や、ファイルでのエラーのスキップなど様々な期待される用途によって出力を分けることができます。

他にも...

バンドルする際にbabelを用いることによって、es6,es7をes５に変換することができるなどありますが、とりあえずwebpackの概要を知るには上の条件でいいかなと思います。
より知りたい方は以下のリンクなども参考にしてみてください。
webpackの利点をもっと知る

実行手順

node.jsの実行環境を整える
webpackをインストール
npm init
webpack.config.jsでwebapackの設定を書く

実際に動かすコマンドに関しては以下のリンクをなどを参考にしてみてください。
webpackの導入手順についてもっと知る

どんなふうに動くの？

では、サンプルコードを題材に動きを確認しましょう。
今回のサンプルコードのディレクトリ構造は次のようになっています。

.
├── entry.js
├── modules
│   └── increment.js
├── output
│   └── bundle.js
├── package.json
└── webpack.config.js

基本的なwebpackの記法

まず、entryに起点となるファイルを指定します。
そこから、importされているファイルをたどり、１つのファイルを生成します。
そして、outputのfilenameに出力するファイル名を指定し、pathで指定されたディレクトリ階層に出力しています。

webpack.config.js

module.exports = {
  entry: './entry.js', // entry pointを起点にバンドルしていきます
  output: { // 出力に関して
    filename: 'bundle.js', // 出力するファイル名    
    path: `${__dirname}/output/` // 出力するディレクトリ階層
    // pathは絶対パスで指定、そのため __dirname でディレクトリ階層を取得しています
  }
};

サンプルコードを動かしてみる

それでは、先ほどのwebpack.config.jsの設定で以下のサンプルコードを実行して見ましょう

modules/increment.js

export function increment(a) {
  return a + 1;
}

entry.js

import { increment } from './modules/increment';

console.log('before:', 0);
console.log('***increment***');
console.log('after:', increment(0));

実行コマンド

webpack && node ./output/bundle.js

出力結果

before: 0
***increment***
after: 1

出力されたサンプルコード
 サンプルコードをもっと見る

1.x系と2.x,3.x系の記法の違いに注意！

特に初心者がハマるところとして、1.x系と2.x,3.x系の記法の違いが挙げられます。
webpackは1.x,2.xと段階を得て現在(2017/8/28）、3.xバージョンとなっています。
1.x系と2.x系以降では記法に変更がありました。
現在webpackを特別な指定をせずインストールすると3.x系となり、そのまま作業した場合、1.x系の記法で書いてしまうと動きません。
そのため、最初にとりあえず、見よう見まねで動かそうする時、古い記事に書いてあるコードをバージョン確認をせずにコピペしてしまうと危険です！
1.x系の記法をコピペしてしまうと、ハマって時間を潰してしまうことがあるので注意しましょう。

まとめ

なんとなくwebpackについてわかって頂けたでしょうか？
より知りたいという方は以下の参考リンクに進んでみてください。
また、なにか間違い、違和感などありましたら、編集リクエストお待ちしてます。
次回は、今日も少し出てきましたが、今回学習したwebpackとともによく使われるbabelについてなんとなくわかる記事を書く予定です！

参考リンク

Webpack
Webpackってどんなもの？
最新版で学ぶwebpack 3入門 – JavaScript開発で人気のバンドルツール
 モジュール管理、だけじゃない-Webpack入門〜 JSおくのほそ道 #029

【５分でなんとなく理解！】Webpack入門