【最新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です！
お疲れ様でした！
投稿者のサイトもあるから、是非遊びにきてね。