【React入門12】webpack-dev-serverでローカル環境を整備する

f:id:nekorokkekun:20190906103159p:plain:w1000
こちらの記事は、React入門チュートリアルです。

Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。

webpack-dev-serverとは？
webpack-dev-serverを導入しよう。

webpack-dev-serverとは？

webpack-dev-serverとは、webpackをビルドツールとして使用する開発におすすめのローカルサーバー機能です。

他にもローカルサーバー機能を提供するライブラリはありますが、やはりwebpackという名前がついている通り、webpack-dev-serverとwebpackの親和性は高いようです。

webpack-dev-serverを導入しよう。

それでは早速webpack-dev-serverを導入していきましょう。

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

次にpackage.jsonのscriptsへ追記します。

  "scripts": {
　 // 省略
    "start": "webpack-dev-server"
  },

そしてwebpack-dev-serverでビルドしましょう。

$ npm run start

自分自身がハマってしまっていたので、以下のようなエラーが起きた際にはこちらの記事をお読みください。

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/morishimahiraku/my-app/node_modules/babel-preset-react/lib/index.js
    at createDescriptor (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/config-chain.js:120:22)
    at loadPrivatePartialConfig (/Users/morishimahiraku/my-app/node_modules/@babel/core/lib/config/partial.js:85:55)

無事にnpm run startでビルドされれば以下のように表示されますのでアクセスすると、webpackでビルドした際と同様の環境になっていますね。

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/morishimahiraku/my-app
ℹ ｢wdm｣: Hash: d6a6f235867249bd306a
.
.
.
.
ℹ ｢wdm｣: Compiled successfully.

webpack-dev-serverを導入することで、ソースコードの変更時に自動的にビルドを実行しますので便利なのです。

しかしwebpackにも以前watchモードという、コードが編集されると自動検知して、再ビルドを行う機能があることをご紹介しました。

ではwebpackのwatchモードと、webpack-dev-serverでは何が違うのでしょうか。

実はwebpack-dev-serverはwebpack watchモードの上位互換のような感じで、