🤕

create-react-appを使わずに環境構築する with webpack

2023/01/21に公開約3,900字

初めに

今回は、create-react-appを使わずに、ReactとTypeScriptの環境を構築していこうと思います。
最近では、Viteが人気ですが、今回は安定のwebpackで構築していきます。
ではさっそく始めていきます。

package.json作成

まず初めに、プロジェクトのルートディレクトリにて、以下のコマンドでPackage.jsonを作成します。

npm init -y

package.json とは、パッケージのメタデータを管理するためのファイルです。
こちらに詳しい説明が書いてありますので、読んでみてください。

Reactインストール

次に、以下のコマンドでReact関連のモジュールをインストールしていきます。
Reactの型定義ファイルである「@types/react」「@types/react-dom」も同時にインストールします。

npm install react react-dom @types/react @types/react-dom

TypeScriptとwebpackをインストール

次に、以下のコマンドでTypescriptとwebpackをインストールしていきます。

npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server

webpackの設定

  • Webpackとは

webpackとは、複数のモジュールの依存関係を解決して1つにまとめるためのツール(モジュールバンドラー)です。
複数モジュールを1つのファイルにまとめてくれるので、読み込み順を気にせず、1回のリクエストで済むため、サーバの負担を減らすことができます。

  • Webpack詳細設定

webpack の設定ファイルwebpack.config.jsを作成します。

const path = require("path");

module.exports = {
	// 開発用の設定
  mode: "development",
  // エントリーポイントを設定
  entry: "./src/index.tsx",
  // バンドル後のファイルの出力設定
  output: {
    //  ファイルのの出力先のディレクトリを指定する
    path: path.join(__dirname, "dist"),
    // 出力されるファイル名
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 「test」で指定した拡張子をコンパイルする
        test: /\.tsx?$/,
        use: "ts-loader",
      },
    ],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 3000,
  },
  // importの際に「extensions」の拡張子を省略する
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"],
  },
};

Webpackの詳しい設定方法は以下の公式リファレンスを参考にしてください。

https://webpack.js.org/guides/production/

TypeScript(tsconfig.json)の設定

まずプロジェクト直下にてTypeScriptの設定ファイル tsconfig.json を作成します。
tsconfig.jsonにはプロジェクトに応じた設定をします。今回は以下のように設定しました。

{
  "compilerOptions": {
    // 厳密な型チェックを有効化
    "strict": true,
    // ソースマップを有効化
    "sourceMap": true,
    // tsファイルはECS5にコンパイルされる
    "target": "ES5",
	  "lib": ["ES2021", "DOM"],
    // TSはesnextとして出力
    "module": "esnext",
    // JSXを使用可能に設定
    "jsx": "react",
    "moduleResolution": "node",
  },
	// コンパイルするフォルダを指定
  "include": ["src"]
}

ReactコンポーネントとHTMLファイルの作成

最後に、Reactのコンポーネントと最終的に出力されるHTMLファイルを作成しましょう!

・React

プロジェクト直下にsrcディレクトリを作成し、その配下にApp.tsxとindex.tsxを作っていきます。

// App.tsx

import * as React from "react";

export const App = () => {
  return <div>Hello Qiita!!</div>;
};
// index.tsx

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

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

・HTML

プロジェクト直下にdistディレクトリを作成し、その中にバンドル後のJavaScriptファイルを受け取るindex.htmlを作成していきます。

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react-ts-webpack</title>
  </head>
  <body>
    <div id="root"></div>
    <script defer src="main.js"></script>
  </body>
</html>

build

では、ビルドして実際に画面を確認してみましょう!
package.jsonにscriptsの上記の設定を追記して、ターミナルでnpm run startします。

{
  "name": "setup-eslint-prettier",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",

  "scripts": {
    // 追加
    "build": "webpack",
    "start": "webpack serve --open"
  },

  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}
npm run start

無事ブラウザ上で確認できました。

Untitled.png

create-react-appの内部ではこんな作業が行われていたんですね。CRAさんいつもありがとうございます。

Discussion

ログインするとコメントできます