JavaScript

Babel + Webpack + TypeScriptの開発環境でReactアプリをビルドしよう

以下の記事の続きです。

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

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

この記事で解説すること
  • webpack-dev-serverを使ってローカルで動かす方法
  • npm scriptsにコマンドを追加する方法

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",  // 追加
  },
  // 省略
}

 

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

$ npm start

 

以上です。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA