概要

WEB+DB PRESS vol.97のReactで作るシングルページアプリケーション入門の自分用メモ
https://www.amazon.co.jp/o/ASIN/4774187283/gihyojp-22

開発環境の構築

cd ~/project
mkdir spa-note
npm init -y
cd spa-note

jsのビルド環境の設定

npm install --save react react-dom # Reactのインストール
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack  # babel, webpackのインストール

webpackの設定

webpack.config.jsの作成

webpack.config.js

module.exports = {
  entry: { js: './src/main.js' },
  output: { path: __dirname + '/public', filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  devtool: 'source-map',
};

※ 本だとoutput/pathが「’./public’」だったが以下のエラーがでたため、「__dirname + '/public'」に変更したら治った
エラー内容

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!

.babelrcの作成

.babelrc

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

ビルド実行

./node_modules/.bin/webpack

開発用サーバの設定

webpack-dev-serverのインストール

npm install --save-dev webpack-dev-server

webpack.config.jsの修正

webpack.config.js

module.exports = {
  // == 以下を追加 ==
  devServer: {
    contentBase: './public',
    port: 8080,
    inline: true,
    historyApiFallback: true,
  },
  // == 以上を追加 ==
};

htmlの用意

src/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SPA Note</title>
    <link ref="stylesheet" href="/bundle.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

サーバ起動

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

動作確認

ブラウザでhttp://localhost:8080/index.htmlにアクセスすれば
Hello SPA!と表示されるはず