webpackことはじめのーと

* webpack 2.2.0-rc4
* npm 4.0.5

# 環境準備

1. npmをインストールする。

以上。

```
brew install npm
```

Mac以外は知りません。

# Getting Startedでやってることと起こること

https://webpack.js.org/get-started/

割愛したり順番入れ替えたりしています。

## `package.json`の作成

```
npm init -y
```

`package.json`ができる。この時点では`dependencies`などは空。

```package.json
{
  ...
  "dependencies": {},
  "devDependencies": {},
  ...
}
```

## 使うライブラリの追加

```
npm install --save-dev webpack@beta
```

`webpack`が`package.json`の`devDependencies`に追加される。

```
npm install --save lodash
```

`lodash`が`package.json`の`dependencies`に追加される。

```package.json
{
  ...
  "dependencies": {
    "lodash": "^4.17.4"
  },
  "devDependencies": {
    "webpack": "^2.2.0"
  },
  ...
}
```

こんな感じで、必要なものを追加していく。
自分で書き換えても良いけれど、`npm install --save`でやるとダウンロードもしてくれるのでビルド時の待ち時間が減る。

## `webpack.config.js`の作成

作らなくてもビルドパラメーターに渡せば動かせられるが、設定は多くなるので`webpack.config.js`に書いておく。
作成するコマンドはない？ので自分で書く。

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

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

## npmにwebpackを実行してもらえるようにする

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

`npm run build`でwebpackを実行できるようにする。
`webpack`コマンドを使いたいのなら、globalへインストールすればよい（`/usr/local/bin/webpack` が作られる。）

```
npm install webpack@beta -g
webpack app/index.js dist/bundle.js
```

しかしbuild時に他のことをさせたりオプションを指定したりするので、`npm`経由で実行させるようにしておくほうがよさそう。

## `app/index.js`の作成

```app/index.js
import _ from 'loadash';

function component () {
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello','webpack'], ' ');
  return element;
}

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

「loadashを使うコード」くらいのイメージ。
重要なのは`import`のところ。

## ビルド実行

```
npm run build
```

`dist/bundle.js`に出力される。
`index.js`に自分で書いたところは以下のようになってる。

```js:dist/bundle.js
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_lodash__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_lodash___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_lodash__);


function component () {
  var element = document.createElement('div');
  element.innerHTML = __WEBPACK_IMPORTED_MODULE_0_lodash___default.a.join(['Hello','webpack'], ' '); 
  return element;
}

document.body.appendChild(component());



/***/ })
```

## HTMLで`bundle.js`を使うようにする

HTMLはこの`bundle.js`を使う形にすればOK

```index.html
<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>

...

    <script src="dist/bundle.js"></script>
  </body>
</html>
```

シンプル。

# 出来上がる構成

Getting Startedの成果物。

```
.
├── app
│   └── index.js
├── index.html
├── package.json
└── webpack.config.js
```

## コミットしちゃいけないもの

|作られるもの|作成コマンド|情報源|
|---|---|---|
| node_modules/ | `npm install` | package.json      |
| dist/         | `webpack`     | webpack.config.js |

"dist/" は webpack.config.js の記述次第なので .gitignore_global[^1] には書かない。"node_modules/" は書いて良いかも。

[^1]: "core.excludesfile" で設定する共通的なgitignoreを便宜上こう呼ぶ。

# 動かし方

他の環境でビルドする場合。

```
npm install
npm run build
```

`npm install`で`package.json`に書かれているものを`node_modules/`に持ってくる。
`npm run build`で`webpack.config.js`に書かれている設定でビルドされる。