Webpack4, Babel7 による React開発環境構築

ここでは、Webpack4, Babel7 を使用して React の環境構築までを12のステップに分けて説明します。

本記事の編集結果は以下のリポジトリにもあります。
https://github.com/bluemooninc/react-webpack

## 1.作業フォルダ作成とプロジェクトの初期化

以下、作業フォルダを作成して、npmでプロジェクトの初期化を行います。

```bash
mkdir react-webpack
cd react-webpack
## いくつかの質問により package.jsonファイルが生成されます。最初は単にリターンでも構いません。
npm init
```

## 2.Reactモジュールのインストール

```text
npm i react react-dom
```
## 3.Webpack4モジュールのインストール

ローカルのプロジェクトフォルダにwebpackをインストールします。

```text
$ npm i --save-dev webpack webpack-dev-server webpack-cli
```

## 4.Babel7モジュールのインストール

ローカルのプロジェクトフォルダにbabelをインストールします。

```text
$ npm i --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin
```

ここで、インストールしたモジュールのバージョンを確認してみます。

```
$ npm list --depth=0
  react-webpack@1.0.0
  ├── @babel/core@7.6.0
  ├── @babel/preset-env@7.6.0
  ├── @babel/preset-react@7.0.0
  ├── babel-loader@8.0.6
  ├── babel-preset-react@6.24.1
  ├── html-webpack-plugin@3.2.0
  ├── react@16.9.0
  ├── react-dom@16.9.0
  ├── webpack@4.40.2
  ├── webpack-cli@3.3.9
  └── webpack-dev-server@3.8.1
```

## 5.webpack4の環境設定

Webpack4のin/outのフォルダ設定とモジュールのルール設定、webサーバの設定、プラグインの設定を行います。

```
touch webpack.config.js
```

```text
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: [
        './src/index.js'
    ],
    output: {
        path: path.join(__dirname + '/dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: [['@babel/preset-env', { modules: false }]]
                    }
                }
            ]
        }]
    },
    resolve: {
        extensions: ['.js', '.jsx'] // use js, jsx file
    },
    devServer: {
        open: true,
        historyApiFallback: true,
        contentBase: path.join(__dirname, '/dist'),
        watchContentBase: true,
        inline: true,
        hot: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Custom template',
            template: 'src/index.html'
        })
    ]
};
```

## 6.index.htmlの作成
HtmlWebpackPluginで設定したsrc/index.htmlを作成します。このファイルを編集すれば自動的にwebpackのコンパイルが行われるのですぐにブラウザで確認できます。

```
mkdir src
touch src/index.html
```

```text
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Document</title>
</head>
<body>
<h1>Start Ok</h1>
<div id="app"></div>
</body>
</html>
```
## 7..Babelrcファイルの編集

Reactで動作させる為のプリセットを設定します。

```
touch .Babelrc
```

```text
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```

## 8.index.jsの編集

Webpack, Banbelの環境設定ができたので、Reactのルーティングファイルを作成します。

```
touch src/index.js
```

```text
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));
```

## 9.Edit App.js

Reactのアプリケーション部分のサンプルを記述します。

```
touch src/App.js
```

```text
import React from 'react';

export default class extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello World!</h1>
            </div>
        );
    }
}
```

## 10.package.jsonへスクリプトの追加

サンプルコードができたので、サーバ実行に必要なスクリプトを記述します。 start というコマンドで webpack-dev-serverを起動します。デフォルトポートの8080セキュリティソフトなどで塞がっている事が多いので任意のポートに変更して待ち受けます。

```text
  "scripts": {
    "start": "webpack-dev-server --port 3000",
    "build": "webpack --mode production"
  },
```

## 11.ローカルサーバの起動

スクリプトの設定が終わったら、実際にローカルで起動します。HtmlPluginやWebpackを--hot設定にした事で、html,jsファイルを編集すれば webpack がメモリ内で再コンパイルして自動更新してくれます。

```text
npm run start
```

この時点でのフォルダ構成は以下の通りとなります。

```
├── .Babelrc
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.js
│   ├── index.html
│   └── index.js
└── webpack.config.js

```

## 12.本番用のビルド

実際にビルドしてファイル出力してみます。buildフォルダに出力されるのでこのファイルをWebサーバに置けば React のWebアプリとして動作します、

```text
npm run build
```