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の公式ホームページとか見て下さい

Babelとは

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

環境構築手順

・Node.jsのインストール

Node.jsの公式サイトからインストールしてくるか、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もまとめたくなったので下記を実行。

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

{
  "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",

$ npm run start

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

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