WebPackとbabelを使ったReact環境構築。CSSもまとめてPack。

初めての投稿になります。
間違っている点など有りましたら、ご指摘いただけるとありがたいです。

最近React.jsをちょいちょい勉強しようかなーと思ったのですが、結構色々めんどくさいと思ったので自分用のメモとしても。

環境
-
・Mac OS X El Capitan
・Node.js 6.10.0
・npm 4.3.0

Webpackとは
-
コンポーネント化したいファイルがたくさんあるときに別ファイルにして管理したい。自分の中でのイメージとしては、その沢山のファイルを一個にまとめてくれるものかなと。名前のとおりですが、webをpackageする的な？
[詳しくはWebpackの公式ホームページとか見て下さい](https://webpack.js.org/)


Babelとは
-
ES6->ES5に変換してくれるもの。

環境構築手順
-

###・Node.jsのインストール
[Node.jsの公式サイト](https://nodejs.org/ja/)からインストールしてくるか、Homebrewやnvmなどでインストールして下さい。ココらへんは「Node.jsのインストール」でググればでてくるので省略。

###・プロジェクトの作成、初期化

```お好きな場所で
$ mkdir dir-name
$ cd dir-name
$ npm init -y
```
-yがないといっぱい設定聞かれますが、あとからどうせ変えれるのでとりあえず全部yesにしときましょう。Enter連打はしたくない。

その結果できたファイルがこちら

```package.json
{
  "name": "dir-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

###・ReactとBabelとWebpackをインストール

```
$ npm install --save react react-dom

$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack babel-preset-react-hmre
```

--saveコマンドや--save-devコマンドをつけると、packege.jsonにモジュールのバージョンが書かれるようになります。

```ReactとBabelとWebpackをインストール後のpackage.json
{
  "name": "dir-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-react-hmre": "^1.1.1",
    "webpack": "^2.2.1"
  }
}
```

以上で基本的にはインストール終了ですが、cssもまとめたくなったので下記を実行。

```・cssもまとめたいのでインストール
npm install --save-dev css-loader postcss-loader postcss-easy-import extract-text-webpack-plugin style-loader
```

webpackによってまとめるjsとcssを記入

```src/main.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>Hello React Workd!!</div>,
  document.getElementById('app')
);
```

conmonentsディレクトリ配下のcssを全てダウンロード

```src/main.css
@import 'styles/style.css';
@import './components/**/*.css';
```

main.cssの記載に合わせて適当に以下のように
cssを作成

```src/styles/style.css
body {
  margin: 0;
  background-color: yellow;
}

```


```package.json
{
  "name": "dir-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.27.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "postcss-easy-import": "^2.0.0",
    "postcss-loader": "^1.3.3",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1"
  }
}
```


以上でインストール系は完了です。バージョンを指定せずにインストールすると最新版がインストールされますが、バージョンによってはうまく動かないこともあるようです。

###・Webpackの設定
webpackの設定はwebpack.config.js、Babelの設定は.babelrcというファイルを作成して記述

```webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    js: './main.js',
    css: './main.css'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.[name]',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'react-hmre']
        },
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: "style-loader",
            use: ["css-loader",
              {
                loader: 'postcss-loader',
                options: {
                  plugins: () => [
                    require('postcss-easy-import')({ glob: true}),
                  ]
                },
              },
            ]
          }
        )
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('bundle.css'),
  ],
  devtool: 'source-map',
  devServer: {
    contentBase: './public/',
    port: 8080,
    inline: true,
    historyApiFallback: true,
    clientLogLevel: "info",
    stats: { colors: true }
  }
};
```

.babelrc

```.babelrc
{
  "presets": ["es2015", "react"]
}
```

・最終的なディレクトリ構成

```
dir-name
└── .babelrc
└── node_modules/
└── package.json
└── public/
└── src/
└── webpack.config.js
```

###・ビルドの実行
 npm run ＜command＞ の様にして実行。
コマンド登録の仕方は以下をpackage.jsonのscriptの項目に登録。

```package.json
    "production": "webpack -p",
    "develop": "webpack -d",
    "watch": "webpack -d --watch",
```

・-pは本番環境用の設定をしてくれるもので生成するファイルを減らしてくれる。
・-dは開発用の設定をしてくれるもので実行時にソースマップを生成してくれる。
・--watchはファイルを監視し、ファイルが変更されたときに自動でファイルを再生成させる。

以上でcomponent以下のcssファイルを全部読み込んで実行してくれます。

###・サーバの起動
次のようなHTMLを用意してからビルド実行コマンドなどで実行。

```public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>環境構築</title>
<link rel="stylesheet" href="/bundle.css">
</head>
<body>
<div id="app"></div>
<script src="/bundle.js"></script>
</body>
</html>
```

```ビルド実行
$ npm run watch
```

ただ、ここで毎回リロードするのめんどくさいのでwebpack-dev-serverというモジュールを使用することに。

```
$ npm install --save-dev webpack-dev-server
```

先程と同様にコマンドをpackage.jsonのscriptに登録。

```package.json
    "production": "webpack -p",
    "develop": "webpack -d",
    "watch": "webpack -d --watch",
```

```webpack-dev-serverを実行してサーバ起動
$ npm run start
```


以上で変更点とかが自動で反映される開発環境になったはずです！

もっとこうした方がいいとかあれば是非コメント下さい。