yarnとwebpackでwebpackのチュートリアルする

yarnのドキュメントを読んだので、今度はwebpackの勉強がてらwebpackのチュートリアルしてみる。
yarnはnpmの代わりに使うだけなのですが、、

# webpackとは
webpackとは、モダンJavaScriptアプリケーションのモジュールバンドラー。
アプリケーションが必要とするモジュール（依存関係も含む）をまとめてくれる。

## webpackを使うメリット
- 該当スクリプトでの依存関係が明らかになる
- 依存関係の解決がされているので、読み込み順を間違える心配がない
- 必要な依存関係だけをインポートしているので、不要なモジュールをインポートしないで済む

### これまでの問題点
- JavaScriptのスクリプトが外部ライブラリに依存しているかわからない
- 依存関係を見落としたり、間違えた順序で読み込むとアプリケーションは正しく動作しない
- 使わない依存関係を含めてしまうと、ブラウザで不要なコードをダウンロードしてしまう

# チュートリアルする
[webpack Guides](https://webpack.js.org/guides/)をやってみる。

## 準備
好きなディレクトリ作って移動して、その中で`yarn init`する。
そしたらwebpackの依存を追加する。

```bash
yarn init
yarn add webpack --dev
```

HTMLとJavaScriptファイルを追加する

```
  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
+ |- /src
+   |- index.js
```

## コードを書く
準備で作成したindex.htmlとsrc/index.jsにコードを追加する。

```html:index.html
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>
```

```js:src/index.js
import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
```

lodashについてはこの後言

## 依存関係の追加
`lodash`という依存をインストールする。
lodashはindex.jsと依存関係にあるので、ローカルにインストールする必要がある。

```bash
yarn add lodssh --dev
```

package.jsonにも追加されている。

```json:package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "index.js",
  "author": "kyohei",
  "license": "MIT",
  "dependencies": {
    "webpack": "^3.0.0"
  },
  "devDependencies": {
    "lodash": "^4.17.4"
  }
}
```


## モジュールの読み込みとHTMLファイルの編集
webpackを使ってスクリプトをbundleするので、src/index.jsを編集しlodashをインポートする。

```js:src/index.js
import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
```

index.htmlのscriptタグでは、バンドルしたファイルを読み込むようにする。
lodashを読み込むようにしていたscriptタグは消す。

```html:dist/index.html
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>
```

## bundleの実行
src/index.jsをエントリポイント、dist/bundle.jsをアウトプットとしてwebpackを実行する。

```bash
./node_modules/.bin/webpack src/index.js dist/bundle.js
```

index.htmlを開いて`Hello webpack`と表示されていればうまくいっている。

## ES6モジュール
webpackはimportとexport以外のコードを変更しないので注意。
他のES6の機能を使用している場合は、babelなどのトランスパイラを使用する。

## webpackの設定
ほとんどのプロジェクトでは、チュートリアルよりも複雑な設定ファイルが必要になる。そのため、webpackは設定ファイルをサポートしている。
ターミナルでコマンドを実行するよりも効率的。
webpack.config.jsファイルをプロジェクトのルート直下に作成する。

作成したwebpack.config.jsを以下のように編集する。

```js:webpack.config.js
var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
```

ターミナルで以下のように実行すれば設定ファイル通りに実行される。

```bash
./node_modules/.bin/webpack --config webpack.config.js
```

`./node_modules/.bin/webpack`ってパスを通せば短くできるのかな、、、
調べてみたい。
→ package.jsonのscriptsを使えばパスを通さなくても良かった。
詳しくは後述。

webpack.config.jsが存在する場合は、デフォルトで見に行くので、webpack.config.jsを設定ファイルとして使用する場合は、以下でも大丈夫。

```bash
./node_modules/.bin/webpack
```

設定ファイルでローダーやプラグインの定義ができる。
詳しくは[Configuration documentation](https://webpack.js.org/configuration)にあるので必要になったら読みたい。

## yarn scripts
ターミナルからwebpackのパス全体を入力してローカルコピーを実行するのは手間。
package.jsonにショートカットを設定できる。
`scripts`の中では、パス全体を書き出す代わりに、ローカルにインストールされたパッケージを参照できている。

```json:package.json
{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}
```

ターミナルで以下のように実行できる。

```bash
yarn run build
```


## 今後
webpackのGuideのGetting Startedまで行ったので、サイドバーのAsset Managementを始めたり、必要になったカテゴリをやってみると良いかも
[Asset Management](https://webpack.js.org/guides/asset-management/)

## 参考
[webpack Getting Started](https://webpack.js.org/guides/getting-started/)
[webpack Concepts](https://webpack.js.org/concepts/)