次のようなページを作成します。
こちらのページと同じことを行いました。
https://naokeyzmt.com/rogue/not-create-react-app/
プロジェクトの用意
mkdir proj01
cd proj01
yarn init -y
ライブラリーのインストール
yarn add react react-dom
yarn add -D webpack webpack-cli webpack-dev-server
webpack.config.js の作成
webpack.config.js
// pathモジュールの読み込み
const path = require("path");
module.exports = {
// モードを開発モードにする
mode: "development",
// 入力ファイル設定
entry: [path.resolve(__dirname, "./src/index.tsx")],
// 出力ファイル設定
output: {
// 出力されるファイル名
filename: "bundle.js",
// 出力先ディレクトリ
path: path.resolve(__dirname, "dist")
},
// モジュール設定
module: {
rules: [
{
// ts-loaderの設定
test: /\.(js|ts|tsx)?$/,
use: "ts-loader",
exclude: /node_modules/
},
]
},
// モジュール解決
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
// 開発モード設定
devtool: "source-map",
devServer: {
static: {
directory: path.resolve(__dirname, "./dist"),
}
// contentBase: "./dist"
}
};
Typescript のインストール
yarn add -D typescript ts-loader
yarn add -D @types/react @types/react-dom @types/node
tsconfig.json の作成
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"types":["node"],
"lib": [
"es2019",
"dom"
],
"allowJs": true, // jsコンパイル用
"checkJs": true, // js簡易型チェック
"sourceMap": true,
"inlineSources": true,
"outDir": "./dist/",
"noImplicitAny": true,
"jsx": "react",
"allowSyntheticDefaultImports": true,
"moduleResolution": "node"
}
}
ソースコードの作成
src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
// コンポーネント読み込み
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("root"));
src/components/App.tsx
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<>
<div>
<h1>Hello TS-React!</h1>
<h1>皆さん、こんにちは</h1>
<blockquote>
<p>May/24/2022 AM 11:13</p>
</blockquote>
</div>
</>
)
}
}
export default App;
dist/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>pure-react</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
サーバーの起動
webpack-dev-server
ブラウザーで、
http://localhost:8080/
にアクセス
フォルダー構造
$ tree -I node_modules
.
├── dist
│ └── index.html
├── package.json
├── src
│ ├── components
│ │ └── App.tsx
│ └── index.tsx
├── tsconfig.json
├── webpack.config.js
└── yarn.lock
次のバージョンで確認しました。
$ webpack-dev-server --version
@webpack-cli/serve 1.6.1
webpack: 5.72.1
webpack-cli: 4.9.2
webpack-dev-server 4.9.0