webpack
Pocket

webpack2で書きなおしてます。

webpack2でReact.jsとwebpack-dev-serverを使えるようにする

前回、webpackとbabelの導入をやってみたので、次はReact.jsを使えるようにしてみます。

また、webpack-dev-serverも入れて、サーバーを立てたり、変更した時の自動コンパイルをやってみます。

初めてでもできるwebpackとbabelを使ってみるまで

もくじ
  1. もろもろインストール
  2. webpack-dev-server
  3. Reactを書いて動かしてみる

もろもろインストール

開発時に必要なもの

npm i babel-preset-react webpack-dev-server -D

React関連

npm i react react-dom -S

そして.babelrcにreactを追記しておきます。

.babelrc

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

ひとまずこの状態でReactは使えます。

webpack-dev-server

webpack-dev-serverを使うために、webpack.config.jsに追記をします。

webpack.config.js

const path = require('path');

module.exports = {
  entry: path.join(__dirname, 'src/app.js'),
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  // ここを追記
  devServer: {
    contentBase: 'public',
    port: 3000,
    inline: true
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }
};

これを追記して以下のコマンドを打ってみます。

./node_modules/.bin/webpack-dev-server

ターミナルをみるとサーバーが立ち上がってるのがわかります。今回はportは3000番でやってます。

また、index.jsを適当に書き換えて保存するとターミナルが動くと思います。保存時に自動でコンパイルしています。inline: trueにしておくとブラウザのリロードもやってくれます。

しかし、index.htmlがないので3000番にアクセスしても何も表示されないです。

publicディレクトリ以下にindex.htmlを作っておきます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

Reactを書いて動かしてみる

適当にReactを書いてみます。

app.js

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p>Hello React!</p>;
  }
}

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

そして以下のコマンドを再度打ちます。

./node_modules/.bin/webpack-dev-server

エラーが起こらなければ以下にアクセスします。

http://localhost:3000/

すると「Hello React!」と表示されてると思います。

これでReactを書いていけます。

さいごに いちいち「./node_modules/.bin/webpack-dev-server」を打つのは面倒なので、package.jsonにコマンドを登録しておきます。

// 省略
  "scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
// 省略

これで以下のコマンドで実行できます。

npm start

他にもCSSも取り込んでみたいのでもうちょっと触ってみます。

シリーズ記事
  1. 初めてでもできるwebpackとbabelを使ってみるまで
  2. webpackでReact.jsとwebpack-dev-serverを使えるようにする
  3. webpackで開発時にソースマップを出したり本番用に圧縮する
  4. webpackでCSSをコンパイルしてみる&SassとPostCSSを使ってみる
  5. react-hot-loaderを使ってReactでHMRをやってみる
Pocket

カテゴリー: タグ: