はじめに

こんにちは。今日もフロントに関する投稿です（最近はバックエンドばかりやっていたけど）。
Reactの新規プロジェクトを立ち上げる際に、皆さんは何を使いますか？
私はなぜかwebpackが好きですが、初期設定や配置が大変です。自分もよくところどころに詰まっていました。こんなwebpackですので、今回は私から自分の立ち上げる手順を記載してみます。
環境については、node 20.15.0を使い、そしてwebpackなどのバージョンは特に指定せず、nodeが決めてもらいます。

ファイル構成

project
├ src
│ ├ app
│ │ └ app.tsx
│ └ index.tsx
├ .babel.config.js
├ index.html
├ package.json
├ tsconfig.json
└ webpack.config.js

設定手順

1. インストール

まずはwebpack関連の物を入れます。

npm i --save-dev webpack webpack-cli webpack-dev-server

※ここで、webpackの初期化ができます。下記を実行したら、webpackからあらゆるファイルを作成します。もちろん必須ではないです。

npx webpack init

loaderを入れます（webpack初期化された場合、これらはすでにインストール済かも）。

npm i --save-dev babel-loader css-loader ts-loader style-loader

babelに必要なライブラリーを入れます。

npm i --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

reactを入れます。

npm i react react-dom react-router-dom

これで基本動作用のライブラリーがそろっています（はず）。

2. package.jsonの設定

上記インストールが終わったら、package.jsonの中にdependenciesとdevDependenciesの下にライブラリーがいっぱい入っています。これからpackage.jsonの残る部分を設定していきます。
まずはscriptsを設定します。ここはwebpack初期化された場合、すでにいくつかコマンドがあるはずです。

"scripts": {
    "build": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "start": "webpack-dev-server"
}

3. .babel.config.jsの設定

babelはreactとtypescript用の.tsxファイルなどをコンパイルするので、事前設定が必要です。中身は以下です。

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript",
  ]
}

4. webpack.config.jsの設定

Webpackの配置は大事です。ややこしいけど、うまく設定しなかったら実行した際に失敗したりエラー出たりします。

modeの出し分け

開発用・リリース用それぞれ設定が異なるので、まずはmodeの出し分けを設定します。

module.exports = () => {
    if (isProduction) {
        config.mode = 'production';
        
        config.plugins.push(new MiniCssExtractPlugin());
        
        
    } else {
        config.mode = 'development';
    }
    return config;
};

configはmode以外の配置を入れます。これから設定していきます。
もちろん、開発用・リリース用それぞれ別configを利用するには可能です。

entry

Webアプリのバンドリングする際最初に行くところです。ここでHTMLのルートを指定してアプリをレンダリングするファイルを入れます。

entry: './src/index.tsx',

output

Webpackでプロジェクトをビルドした際に、成果物に関する設定です。ここでgit管理外のdistフォルダを指定します。

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
},

devServer

ローカルでテストサーバを立ち上げる際に、関連の設定です。

devServer: {
    open: true, // ビルドが完了したら自動的に開くフラグ
    host: 'localhost',
    static: { // 追加静的ファイルの場所。ここは同じくdistを指定
        directory: path.join(__dirname, 'dist')
    },
    port: 8080,
},

module

Webpack実行時に必須なモジュールの配置をここにいれます。

module: {
    rules: [
        { // 最初はbabelの配置になる。順番変更不可
            test: /\.tsx$/i,
            loader: 'babel-loader',
            options: { presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']},
        },
        {
            test: /\.(ts|tsx)$/i, // .tsxはbabelが扱うので、ここはtsだけでも良い…かな
            loader: 'ts-loader',
            options: {
                configFile: path.resolve(__dirname, 'tsconfig.json')
            },
            exclude: ['/node_modules/'],
        },
        { // ここからは自由設定
            test: /\.css$/i,
            use: [stylesHandler,'css-loader'],
        },
        {
            test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
            type: 'asset',
        },
    ],
},

plugins

HTMLテンプレートを使うので、プラグインは必須です。これがないと正確に立ち上げるのはできません。

plugins: [
    new HtmlWebpackPlugin({
        template: './index.html',
    }),
],

その他

resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
},
target: "web"

5. tsconfig.jsonの設定

Typescriptを使うには、tsの設定が必須です。
もちろん、javascriptを使う場合、これは不要です。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "moduleResolution": "Node",
    "allowJs": true
  },
  "include": ["./src"],
  "exclude": ["./node_modules"]
}

6. index.htmlの実装

ここまで設定が完了したので、次は実際にレンダリングされる物を書きます。
index.htmlとはテンプレートで、webアプリのベースファイルのようなものです。ここで基本動作に向けて例を出します。セキュリティ（CSPなど）関連の設定が入っていないです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

    <title>My React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

index.htmlにはIDがrootである要素は必要です。Reactアプリはこの要素にレンダリングします。

7. index.tsxの実装

Webアプリのバンドリングはindex.tsxから始まります。index.tsxには下記の実装が必須です。

レンダリング先の指定（index.htmlのroot要素）
アプリの指定

import * as React from 'react';
import { createRoot } from 'react-dom/client';

import App from './app/app';

const root = document.getElementById('root');
if (!root) throw new Error('No root element found');

createRoot(root).render(
  <App />
);

8. app.tsxの実装

アプリの実装は皆さんが詳しい領域でしょう。ここは例だけ出します。

import * as React from 'react';

function App () {
  return (
    <div>Hello react!😀</div>
  )
}

export default App;

まとめ

上記実装が終わったら、npm startでアプリを起動できます。

これで、webpackでのreactアプリの立ち上げが成功しました。

参考資料

https://qiita.com/hato8899/items/d9613e8bdd0ff470764d
https://zenn.dev/spacemarket/articles/23e5401a074ccc