More than 5 years have passed since last update.

webpack-dev-serverでReactをES6ですぐに書く

Last updated at 2016-05-15Posted at 2015-10-31

browserfyにはwzrdやbeefyのような、ビルド結果をブラウザで即次実行する環境が用意されていますが、webpackで同様のものがwebpack-dev-serverです。

分かりやすいサンプルコードが記載されている英語の記事を見つけましたが、日本語で、改めて自分で確認した手順を、下記に掲載したいと思います。

なお、起動したサーバーは、ファイルの変更を検知して、リビルドを行うライブリロードが標準で付いています。 ¹

mkdir react-server
cd react-server
# make some files ...

tree . -L 1
# .
# ├── package.json
# ├── src
# │   ├── index.html
# │   ├── index.js
# │   └── index.css
# └── webpack.config.js

下記のpackage.jsonとwebpack.config.jsを作成します。

babel@6は現状、環境によって動作しないので使用しないで下さい。

package.json

{
  "name": "react-server",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "babel-core": "^5.8.33",
    "babel-loader": "^5.3.3",
    "file-loader": "^0.8.4",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "react": "^0.14.1",
    "react-dom": "^0.14.1"
  }
}

webpack.config.js

module.exports = {
  context: __dirname + "/src",
  entry: {
    javascript: "./index.js",
    html: "./index.html",
    css: "./index.css",
  },

  output: {
    path: __dirname + "/dist",
    filename: "index.js",
  },
  
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
      {
        test: /\.css$/,
        loader: "file?name=[name].[ext]",
      },
    ],
  },
}

ビルド対象のファイルindex.js,index.html,index.cssを作成します。

mkdir src

src/index.js

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

class Greet extends React.Component{
  render(){
    return (
      <h1>hello! kiniro-mozaiku</h1>
    )
  }
}

window.addEventListener('DOMContentLoaded',()=>{
  ReactDOM.render (<Greet />,document.querySelector('main'))
})

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="index.js"></script>
  <link rel="stylesheet" href="index.css">
</head>
<body>

  <main></main>
  
</body>
</html>

src/index.css

h1{
  font-size:15vw;
}

npm run buildでコンパイル、npm startでブラウザ用の即次実行環境を起動します。

npm install
npm start
# webpack: bundle is now VALID.
# http://localhost:8080/webpack-dev-server/

http://localhost:8080/webpack-dev-server/ にアクセスすると、下記のようになるはずです。

ほかの参考記事（日本語）

Hot Module Replacementの設定と仕組みを理解する ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up