React学習 Webpackその１

#Webpackとは
Webpackとは、`JavaScript`や`CSS`などのソースファイルを1つにまとめたり、`JSX`のような特殊な記法のファイルを変換するツールです。
ソースファイルをまとめることで、ウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に利用できます。

#環境構築

ディレクトリ作成

```react
mkdir webpacktest
```
ディレクトリ移動

```react
cd webpacktest
```
npmの初期化

```react
npm init -y
```
`webpack`のインストール
・`webpack`： webpack本体
・`webpack-cli`： コマンドライン操作用 

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

起点となるソースファイル配置

```react:/src/index.js
import {mul} from './mul'
const result = mul(5, 6)
console.log(result)
```

```react:/src/mul.js
export function mul (a, b) {
  return a * b
}
```

`webpack`を実行し、ファイルをまとめ上げる
特に`webpack`の設定を行っていない場合は、デフォルトの起点となるディレクトリとファイル名は**/src/index.js**であり、出力されるディレクトリとファイル名は**/dist/main.js**となります。
この状態だと設定は行っていないので、**WARNING in configuration**が発生します。

```react
npx webpack 
```

#設定構築
実行はできましたが、このままだとまともに使えないので、各設定を行っていきます。

##npmからの実行
まずは、npmからビルドできるようにpackage.jsonを修正します。

```react:package.json
{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
   //buildの追加
   "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}
```

これにより以下のコマンドでビルドの実行が行えます。

```react
npm run build
```

##webpackの設定ファイル作成
変換元のファイル名等の設定を行うには、設定用のファイルを作成します。
ファイル名は**webpack.config.js**です。

・`entry`: 変換元パス
・`output`： filename=変換先ファイル名、path=変換先のファイルを配置するパス

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

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

また、`mode`という設定もあり、開発用のdevelopmentとソースを変換する際に最適化を行うproductionがあります。
以下のように設定することで、ビルド時に反映されます。

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

module.exports = {
  //modeオプションの追加
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'out')
  }
};
```

ただ、毎回`mode`を書き換えるのは大変なため、package.jsonに`mode`を記述します。

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

module.exports = ( env, argv ) => ({
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'out')
  }
});
```
```react:package.json
{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    //本番用ビルドコマンド
    "build": "webpack --mode=production",
    //開発用ビルドコマンド
    "build-dev": "webpack --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}
```

これにより、以下のコマンドで`mode`切り替えが可能となります。

```react:本番用
npm run build
```

```react:開発用
npm run build-dev
```

##ファイル監視
ファイルを編集する度に、手動でビルドし直すのは大変なので、ファイルを監視し自動的に変換を行ってくれるように設定します。
以下のどれか設定することで監視が可能となります。

①webpack.config.jsで設定する場合

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

module.exports = ( env, argv ) => ({
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'out')
  },
  //watchの追加
  watch: true
});
```

②package.jsonで設定する場合

```react:package.json
{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "webpack --mode=production",
    //watchオプション追加
    "build-dev": "webpack --mode=development --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}
```

③専用の開発用webサーバで監視する場合

```react:webpack-dev-serverパッケージをインストール
npm i -D webpack-dev-server
```

```react:webpack.config.jsの編集
const path = require('path');

module.exports = ( env, argv ) => ({
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'out')
  },
  //devServerの追加
  devServer: {
    //ドキュメントルート設定
    contentBase: path.resolve(__dirname, 'out'),
    //監視モード設定
    watchContentBase: true,
    //ポート設定
    port: 3000
  }
});
```