💻

webpack + React + TypeScriptのボイラープレートを作ってみた

2021/03/07に公開

React

TypeScript

webpack

tech

はじめに

Reactは実務でも個人開発でも触ることが多いのですが、開発環境がすでに整っていたり、CRAやGatsby.js、Next.jsといった便利なツールやフレームワークのおかげでwebpackの設定をがっつりしたことってなかったなーと思い、今回webpack + React + TypeScriptのボイラープレートを作ってみました。

実際のコード

各種設定

パッケージインストール

// 任意のディレクトリでプロジェクトを初期化
npm init -y

// React関連モジュールとその型定義をdependenciesにインストール
npm install react react-dom @types/react @types/react-dom

// TypeScript + webpack関連モジュールをdevDependenciesにインストール
npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server source-map-loader

package.json

今回開発環境ではwebpack-dev-serverを使っているので、npm-scriptsには本番用のbuildコマンドと開発用のdevコマンドの2種類を作成しています。

{
  "name": "webpack_react_boilerplate",
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --open --config webpack.dev.js"
  },
  "devDependencies": {
    "source-map-loader": "^1.0.0",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@types/react": "^16.9.36",
    "@types/react-dom": "^16.9.8",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

tsconfig.json

こちらは以下の書籍を参考にしています。
プログラミングTypeScript

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "outDir": "build",
    "sourceMap": true,
    "strict": true,
    "target": "es5"
  },
  "include": ["src"]
}

webpack.config.js

今回webpack-mergeを使って、開発用と本番用でwebpackの設定ファイルを分けており、webpack.dev.jsとwebpack.prod.js、2つのファイルから読み込む共通設定を書いたwebpack.common.jsの3種類を作成しています。

こちらはwebpack公式サイトを参考にしています。

const path = require("path");

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [{ loader: "ts-loader" }],
      },
    ],
  },
};

const merge = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devServer: {
    contentBase: "./build",
  },
  devtool: "source-map",
});

const merge = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "production",
});

build/index.html

バンドルファイルを読み込むHTMLファイルをbuild/index.htmlとして作成します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>React + TS + webpackボイラープレート</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

src/index.tsx

後はsrc配下にReactアプリケーションを作成すれば完了です。
今回はエントリーファイルをsrc/index.tsxに設定しています。

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

使い方

共通

以下のコマンドで依存ファイルをインストールします。

npm install

開発環境

以下のコマンドでwebpack-dev-serverを立ち上げると、自動でブラウザが開き、ページが表示されます。
ファイルを修正するとリロードせずとも修正内容が反映されます。（ホットリロード）

npm run dev

本番環境用ビルド

以下のコマンドでビルドを実行すると、build/bundle.jsがバンドルされます。

npm run build

おわりに

今回は最小限の構成でボイラプレートを作ったので、比較的シンプルな設定でできました。
恐らくCRAやGatsby.js、Next.jsといったツールやフレームワークではもう少し複雑な設定を裏側でやっているのだと思いますが、webapckの勉強になって良かったです。