Webpack4が来たので使ってみた


**注: ここに書かれてある情報は(2018/02/27)現在のものとなります。**

Electronで簡単なアプリを作ってやってみました。

学習で使ったソースコードは[GitHub](https://github.com/mimikun/test_webpackv4)にあります。

## 環境
macOS 10.13
Electron
Node v8.4.0
npm v5.6.0
webpack v4.0.1

### モジュールインストール

```
npm i -D electron
npm i -D react react-dom
npm i -D babel-core babel-preset-react babel-preset-env
npm i -D webpack babel-loader
```

webpack4からはwebpackコマンドは別パッケージになったので入れます。

```
$ webpack
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

```

翻訳:

```
CLIはwebpack-cliという別のパッケージに移動しました。
CLIを使用するにはwebpack自体に加えて 'webpack-cli'をインストールしてください。
-npmを使用する場合：npm install webpack-cli -D
-yarnを使用する場合：yarn add webpack-cli -D
```

### `webpack-cli`インストール

```
npm i -D webpack-cli
```

一通りコードを書き終わったあと何もせずnpm run buildしたらエラーが出ました。

```
➜  test_webpackv4 git:(master) npm run build
Hash: 51ad6ef45850cddb8c4d
Version: webpack 4.0.1
Time: 82ms
Built at: 2018-2-27 19:50:00
 1 asset
Entrypoint main = main.js
   [0] ./src/index.js 251 bytes {0} [built] [failed] [1 error]

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in ./src/index.js
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type.
| export default class App extends Component {
|   render () {
|     return (<div>
|       <h1>Hello</h1>
|     </div>)
```

翻訳:

```
設定時の警告
'mode'オプションは設定されていません。 この環境のデフォルトを有効にするには、 'mode'オプションを 'development'または 'production'に設定します。

./src/index.jsのERROR
モジュールの解析に失敗しました：予期しないトークン（6:12）
このファイルタイプを処理するには、適切なローダーが必要な場合があります。
```

[ここ](https://qiita.com/shisama/items/730e7a2e6a3090a63a38)を見て実行してみます。

ここでは、Webpack4の目玉と言われるconfigファイルを書かない方法で行こうと思います。

勉強のため順番にやってみました。

### 1. `--module-bind` オプションだけ付けて実行

```
webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader'
```

結果:

```
➜  test_webpackv4 git:(master) webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader'

Hash: dc950f6ced7eac1b3d69
Version: webpack 4.0.1
Time: 888ms
Built at: 2018-2-27 20:07:03
 1 asset
Entrypoint main = main.js
   [0] ./src/index.js 934 bytes {0} [built] [failed] [1 error]

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (6:12)

  4 | export default class App extends Component {
  5 |   render () {
> 6 |     return (<div>
    |             ^
  7 |       <h1>Hello</h1>
  8 |     </div>)
  9 |   }

➜  test_webpackv4 git:(master) ✗
```

翻訳:

```
設定時の警告
'mode'オプションは設定されていません。 この環境のデフォルトを有効にするには、 'mode'オプションを 'development'または 'production'に設定します。

./src/index.jsのERROR
モジュールビルドに失敗しました：SyntaxError：予期しないトークン（6:12）
```

Module parse failed: Unexpected token (6:12) のエラーは消えましたが、modeオプション未設定のエラーは残っています。

なので、modeオプションを付けて実行してみます。

### 2. 1. のオプションに加え、`--mode production`オプションを付けて実行

```
webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --mode production
```

結果:

```
➜  test_webpackv4 git:(master) ✗ webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --mode production
Hash: 47c238ad5361544ab60b
Version: webpack 4.0.1
Time: 248ms
Built at: 2018-2-27 20:12:37
 1 asset
Entrypoint main = main.js
   [0] ./src/index.js 934 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (6:12)

  4 | export default class App extends Component {
  5 |   render () {
> 6 |     return (<div>
    |             ^
  7 |       <h1>Hello</h1>
  8 |     </div>)
  9 |   }

```

翻訳:

```
./src/index.jsのERROR
モジュールビルドに失敗しました：SyntaxError：予期しないトークン（6:12）
```

WARNING in configuration のエラーは消えましたが、Module build failed のエラーはまだ残っています。

次は[ここ](https://www.valentinog.com/blog/webpack-4-tutorial/)を見て作業してみます。

### 1. .babelrc の作成
このような内容で作成します。

```
{
  "presets": ["env", "react"]
}
```

### 2. npm run build してみる

ビルドしてみます。

```
➜  test_webpackv4 git:(master) npm run build

> test_webpackv4@1.0.0 build /Users/mimikun/GitRepo/test_webpackv4
> webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --mode production

Hash: 2f7d3439678328f20725
Version: webpack 4.0.1
Time: 3794ms
Built at: 2018-2-27 20:37:46
  Asset      Size  Chunks             Chunk Names
main.js  99.2 KiB       0  [emitted]  main
Entrypoint main = main.js
  [15] ./src/index.js 2.42 KiB {0} [built]
    + 15 hidden modules
```

成功しました！

### 3. npm start して正しく表示されているか見る

ちゃんと表示されています。

![webpack4Appスクショ](https://qiita-image-store.s3.amazonaws.com/0/96264/a952ab97-b5e6-1b03-eda2-74f8dad79bac.png)

心配なので、webpack3系でビルドしたアプリと比べてみます。
このアプリではwebpack.config.jsを使用しています。

![webpack3系Appスクショ](https://qiita-image-store.s3.amazonaws.com/0/96264/45aac7af-3fb0-7607-2e80-ccc5e44f8ebd.png)

どっちも変わりませんでした。

大丈夫なようです。