【最新2021年版】webpackでReact、TypeScriptの環境構築【脱初心者】

こんにちは。ゆうじろうです。
今日はwebpackを使ったReact、TypeScriptの環境構築を進めていきます。

では、何がともあれプロジェクトを作成しましょう。

mkdir sample-project
cd sample-project

作成したプロジェクトで、初期化

npm init -y

上記のようにpackage.jsonができていればOKです。
Reactのプロジェクトなので、Reactをインストールしていきましょう。

npm install --save react react-dom

webpackを使用するので、同様にwebpackもインストール

npm install --save-dev @types/react-dom @types/webpack @types/webpack-dev-server ts-loader ts-node typescript webpack webpack-cli webpack-dev-server

次にwebpackの設定ファイルを作成しましょう。

touch webpack.config.ts

webpackの中身はこんな感じ。

import path from 'path';
import { Configuration } from 'webpack';

const config: Configuration = {
    context: path.join(__dirname, 'src'),
    entry: './index.tsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/assets',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
            },
        ],
    },
    mode: "development",
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    devtool: "inline-source-map",
    devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 3000,
  },
};

export default config;

次にTypeScriptの設定ファイルを作成します。

touch tsconfig.json

その中身がこちら

{
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": "./",
    "target": "es5",
    "strict": true,
    "module": "commonJs",
    "jsx": "react",
    "lib": [
      "ES5",
      "ES6",
      "DOM"
    ],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
  }
}

次にエントリーファイルであるsrc/index.tsxを作成します。

mkdir src && touch src/index.tsx

index.tsxの中身がこちら。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('app'));

次にhtmlファイルを作成していきます。

mkdir puclic && touch public/index.html

public/index.htmlの中身がこちら

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script src="/assets/bundle.js"></script>
</body>

</html>

ここまできたら、もう何も怖いものはありません。

webpackでbundleしてやりましょう！

npx webpack-dev-server

この表示になったら、
http://localhost:3000
にアクセスしてみましょう！

Hello worldと記述されていればOKです！

お疲れ様でした！

投稿者のサイトもあるから、是非遊びにきてね。