Naoki Otsu

Reactとwebpack2での環境構築

2017-05-15

webpack2 で React 環境を小さく構築する時の備忘録。
webpack-dev-server でローカルサーバーを立ち上げて、React で単なるhogeを出力させるまで。

全体の構成図

/
├public
  └index.html 本番のhtmlファイル
└src
  └index.js 開発時のjsファイル
.babelrc
package.json
webpack.config.js

package.json の作成

yarn init -y

dependencies なモジュールをインストール

yarn add react react-dom

devDependencies なモジュールをインストール

yarn add -D babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server

.babelrc をルートに作成

{
  "presets": ["es2015", "react"]
}

src と public の 2 つのディレクトリを作成

mkdir src public

public の中に、index.html を作成

<!DOCTYPE html>
<html lang="ja">
  <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>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

webpack.config.js を作成

const path = require('path')

const src_path = path.resolve(__dirname, 'src')
const public_path = path.resolve(__dirname, 'public')

module.exports = {
  entry: `${src_path}/index.js`,

  output: {
    path: public_path,
    filename: 'bundle.js',
  },

  devServer: {
    contentBase: public_path, // webpack-dev-serverのルートディレクトリ
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{ loader: 'babel-loader' }],
      },
    ],
  },
}

src の中に、index.js を作成

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => <div>hoge</div>

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

package.json に"scripts"を追記する

{
  ...
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  ...
}

ここまでで環境構築が完了したので、
開発時は、yarn start するとhttp://localhost:8080/でローカルサーバー(LiveReroad)が立ち上がり、
本番時は、yarn build すると public に bundle.js が書き出される。

※ただyarn buildは本番用の minify など何も入ってないので、本番用の設定は適宜入れる必要がある。
https://webpack.js.org/guides/production-build/

[追記 2017/5/15]

PropTypes はクラスの static なプロパティで指定するのが流れのようで、
babel だと、babel-plugin-transform-class-propertiesを使う事が多そうなので追記しておく。

yarn add -D babel-plugin-transform-class-properties

{
  ...
  "plugins": ["transform-class-properties"] // 追記
}

PropTypes の設定例

...
import PropTypes from 'prop-types';

class Counter extends Component {
  static propTypes = {
    value: PropTypes.number.isRequired,
    onIncrement: PropTypes.func.isRequired,
    onDecrement: PropTypes.func.isRequired
  }
  ...
}