Babel + Webpack + TypeScriptの開発環境でReactアプリをビルドしよう｜Playground発！アプリ開発会社の技術ブログ

以下の記事の続きです。

Babel+WebpackでReact(TypeScript)の開発環境を構築しよう！「Reactでオレオレ開発環境を作りたい」「create-react-appを使わずにイチから環境構築をしたい」「BabelやW...

開発環境の設定は完了したので、実際にReactアプリをビルドしてみましょう。

この記事で解説すること

webpack-dev-serverを使ってローカルで動かす方法
npm scriptsにコマンドを追加する方法

1 webpack-dev-serverでローカルサーバーでアプリを動かす方法

webpack-dev-serverでローカルサーバーでアプリを動かす方法

webpack-dev-serverを使うと、ローカル環境でReactを動かすことができます。

webpack-dev-serverを使う事前準備

まずはインストールしてみましょう。

$ npm i --save-dev webpack-dev-server

次に、Reactアプリの元になるdist/index.htmlを作成します。

$ touch dist/index.html

dist/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Hello, React!</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

ローカルサーバーを起動しよう

そして、前回の記事で記述したwebpack.config.jsであれば、以下コマンドを実行してください。

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

localhost:8080にアクセスすると、ローカルサーバーに接続できるはずです。

npm scriptsにコマンドを追加しよう

ローカルサーバーを簡単に起動できるようpackage.jsonに以下の記述を追加しましょう。

package.json

{
  // 省略
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",  // 追加
  },
  // 省略
}

次からは以下のコマンドで実行できます。