【React実験】 Webpackの使用

JavaScript関連のエントリにwebpackの話題が良く出てくる。現状必要に迫られているわけじゃないから無視してたけど、やっぱり使い方くらいは知っといた方がいいかなと思って使ってみた。

  1. ディレクトリ構成
  2. webpackのインストール
  3. 必要なnpmパッケージのインストール
  4. webpack設定ファイルの作成
  5. それぞれのファイルの中身
  6. webpackの実行
  7. ローカルサーバーの起動
  8. まとめ

ディレクトリ構成

test-webpack/
   + node_modules/
   + build/
   |  + scripts/
   |  |  + main.bundle.js
   |  |
   |  + index.html
   |
   + source/
   |  + scripts/
   |     + components/
   |     |  + app.jsx
   |     |  + hello.jsx
   |     |
   |     + main.js
   |
   + package.json
   + webpack.config.js

できれば source/ に index.html も入れて build/ に出力させたかったが、やり方がわからなかった。

webpackのインストール

> cd test-webpack
> npm install webpack -g
> npm install webpack-dev-server -g
> npm init

必要なnpmパッケージのインストール

package.json

{
  // 略
  "dependencies": {
    "webpack": "*",
    "react": "*",
    "react-dom": "*",
    "babel-core": "*",
    "babel-loader": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*"
  },
  // 略
}
> npm install

webpack設定ファイルの作成

webpack.config.js

var webpack = require("webpack");

module.exports = {
  "context": __dirname + "/source",
  "entry": {
    "main": "./scripts/main.js"
  },
  "resolve": {
    "extensions": ["", ".js", ".jsx"]
  },
  "output": {
    "path": __dirname + "/build/scripts",
    "filename": "[name].bundle.js"
  },
  "module": {
    "loaders": [
      {
        "test": /.jsx?$/,
        "loader": "babel-loader",
        "exclude": /node_modules/,
        "query": {
          "presets": [
            "es2015",
            "react"
          ]
        }
      }
    ]
  }
};

それぞれのファイルの中身

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Flash Cards</title>
</head>
<body>
  <div id="app"></div>

  <script src="./scripts/bundle.js"></script>
</body>
</html>

scripts/main.js

import App from "./components/app";

scripts/components/app.jsx

import React from "react";
import ReactDOM from "react-dom";

import Hello from "./hello";

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

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

scripts/components/hello.jsx

import React from "react";

export default class Hello extends React.Component {
  render() {
    return (
      <h1>Hello World!!!!!</h1>
    );
  }
}

webpackの実行

> webpack

ローカルサーバーの起動

> webpack-dev-server

f:id:kosumoro:20160825223605j:plain

本来なら設定ファイルの entry を監視して自動でビルドしてくれるはずだが、なぜか動かないため、ファイルを更新するたびに別プロセスで webpack コマンドでビルドしている。

まとめ

正直gulpの方が使いやすい。慣れの問題だったりとっつきやすさの問題だったり、webpackの機能について勉強不足なせいだったりするんだろうけど。