webpack 2 で SPA の開発環境構築

Build development environment for SPA using webpack 2

React を利用した SPA (Single Page Application) のための開発環境を, webpack 2 で構築していきます.

1. Install Node.js / npm

nodebrew を使うなどしてインストールします.

2. Create package.json

$ npm init -y

3. Install React, Babel and webpack

$ npm install --save react  react-dom
$ npm install --save-dev babel-core babel-loader babel-plugin-transform-class-properties babel-preset-es2015 babel-preset-react webpack webpack-dev-server

4. Create .babelrc

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-class-properties"]
}

5. Create webpack.config.js

module.exports = {
  entry: { js: './src/main.js' },
  output: { path: `${__dirname}/public`, filename: 'app.js' },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      }
    ]
  },
  devtool: 'source-map',
  devServer: {
    contentBase: `${__dirname}/public`,
    port: 8080,
    inline: true,
    historyApiFallback: true
  }
};

赤字で表示しているキーが, webpack 2 で変更されました (1.x では, loaders と loader だったそうです …)

1 つ注意点として, output の path と devServer の contentBase のパスは絶対パスで記述する必要があります. 相対パスで記述してしまうと, 警告やエラー (Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
– configuration.output.path: The provided value “public” is not an absolute path!) が発生してしまいます.

それぞれの設定の詳細は他のドキュメントに任すこととして, とりあえずこれで開発環境構築のための webpack の記述ができました.

6. src/main.js

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

ReactDOM.render(<h1>Hello SPA</h1>, document.getElementById('app'));

7. public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
     <title>Hello SPA</title>
     <link rel="stylesheet" href="/app.css" type="text/css" media="all" />
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="/app.js"></script>
</body>
</html>

8. npm scripts

ビルドと開発サーバーの起動を簡単にできるように, package.json に npm scripts を定義します.

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

以上で, 最低限の開発環境の構築ができました.

$ npm run build

を実行すると, public/app.js が生成されます.

$ npm run start:dev

を実行すると, 開発サーバーが起動し, http://localhost:8080/ にアクセスするとページが表示されます.
また, src/main.js を変更して保存すると, ブラウザが自動でリロードされて, コンテンツが書き換わります (gulp の livereload) .

コメントを残す