webpack1からwebpack3へバージョンアップ

保守できていなかったwebpackのバージョンをあげた際の記録です。
メモレベルで恐縮ですが、よかったら参考にしてください。

## モチベーション
* TypeScriptを導入したい(1だとts-loaderが対応していない)
* ブラウザでのjs実行を速くしたい

## なぜ2ではなく、3なの？
https://webpack.js.org/migrate/3/
公式で
> Note that there were far fewer changes between 2 and 3, so that migration shouldn't be too bad. If you are running into issues, please see the changelog for details.

となっていて、移行ガイドも
`To v2 or v3 from v1`
となっているから。

また、
https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b

> Migrating from webpack 2 to 3, should involve no effort beyond running the upgrade commands in your terminal. We marked this as a Major change because of internal breaking changes that could affect some plugins.

とも。

## 使用ライブラリ
* Grunt
* Webpack
* Bower

## 移行手順
* package.jsonの修正
* bower対応
* DedupePlugin,OccurenceOrderPlugin
* grunt-webpackバージョンアップ
* moduleDirectories
* resolve
* module
* debug

## 移行手順詳細
### package.jsonの修正

webpackの箇所のバージョンを修正

```package.json
"webpack": "^3.12.0"
```


```bash
npm install
```

yarnの方は`yarn install`してください

### bower対応
bowerとは、公式で非推奨になっていますが、フロントエンド周りのパッケージマネージャーです。
将来的使わないようにしたいですが、今回はwebpackのバージョンアップに専念しています。

```webpack.config.js
new webpack.ResolverPlugin(
  new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
)
```
上記はwebpackでbower管理のファイルを読み込む際のお作法のようなものです。

https://github.com/webpack/webpack/issues/2324

> It was removed. There is now a option resolve.plugins. But for bower you don't need a plugin anymore, as the resolve options has been expanded. 
> See: https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options

に書かれていますが、

```webpack.config.js
descriptionFiles: ["package.json", "bower.json"]
```

をwebpack.config.jsのresolveに書いて対応しました。

#### 参考
http://js.studio-kingdom.com/webpack/getting_started/using_plugins

### DedupePlugin,OccurenceOrderPlugin

https://teratail.com/questions/93933
> OccurenceOrderPluginは、Webpack2でOccurrenceOrderPlugin（rが2つ）と改名されています（Issue）。
> DedupeはWebpack2ではデフォルトの動作となったので、プラグインとしては不要です。

とのこと。

### grunt-webpackバージョンアップ
ビルドすると以下のエラーがでました。

```
configuration has an unknown property 'failOnError'. These properties are valid:
```

こちらはバージョンアップで対応しました。

```package.json
"grunt-webpack": "^3.1.3"
```

#### 参考
https://github.com/webpack-contrib/grunt-webpack/issues/81

### moduleDirectories
ビルドすると以下のエラーがでました。

```
configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid
```

https://webpack.js.org/migrate/3/#resolveroot-resolvefallback-resolvemodulesdirectories
公式ガイドのresolve.modulesDirectoriesを参考に修正しました。

#### before

```webpack.config.js
resolve: {
  root: path.resolve(__dirname, "../js/dirname/"),
  modulesDirectories: [
    path.resolve(__dirname, "node_modules"),
    path.resolve(__dirname, "bower_components")
  ]
},
```

#### after

```webpack.config.js
resolve: {
  modules: [
    path.resolve(__dirname, "../js/dirname/"),
    path.resolve(__dirname, "node_modules"),
    path.resolve(__dirname, "bower_components")
  ],
  descriptionFiles: ["package.json", "bower.json"]
},
```

descriptionFilesは前述したbower対応です。
同様にresolveloaderでもmodulesDirectoriesを使用していたので、modulesにリネームしました。

### module.loaders
https://webpack.js.org/migrate/3/#moduleloaders-is-now-modulerules
こちらに沿って変更しました。

https://webpack.js.org/migrate/3/#automatic--loader-module-name-extension-removed
また、ドキュメントにあるように

```webpack.config.js
loader: "babel"
```

ようにサフィックスを省略してはいけなくなり


```webpack.config.js
loader: "babel-loader
```
のようにしました。

### debug
https://webpack.js.org/migrate/3/#debug
こちらに沿って変更しました。

#### before

```webpack.config.js
  debug: true,
```

#### after

```webpack.config.js
  plugins: [
    new webpack.LoaderOptionsPlugin({
      debug: true
    })
  ]
```

## 参考
### 公式移行ガイド
https://webpack.js.org/migrate/3/#moduleloaders-is-now-modulerules

### 他にも
https://qiita.com/uggds/items/2ee337c5843aae28a34a
https://blog.hiroppy.me/entry/2017/02/03/212817