シンプルなwebpackを利用したReact + Typescript プロジェクトのサンプルです。 This is a sample React + Typescript project using simple webpack.
mkdir test-app
cd test-appnpm -y initnpm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm install --save-dev typescript ts-loader
npm install --save-dev react react-dom @types/react @types/react-dom// package.json
"scripts": {
+ "start": "webpack-cli serve --mode development",
+ "build": "webpack-cli --node-env=production --mode production",
}// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const dist = path.resolve(__dirname, './dist');
module.exports = (env, { mode }) => {
// build mode
let buildMode = 'production';
if (mode === 'development') {
buildMode = 'development';
}
return {
mode: buildMode,
devtool: ((buildMode === 'development') ? 'inline-source-map' : 'source-map'),
entry: {'index': './src/index.tsx'},
output: {
filename: '[name].js',
path: dist,
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: 'ts-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html',
chunks: ['index']
}),
],
devServer: {
port: '3000',
host: '0.0.0.0',
open: true,
},
}
};npx tsc --init// tsconfig.json
{
"compilerOptions": {
- // "jsx": "",
+ "jsx": "react-jsx",
- // "outDir": "./",
+ "outDir": "./dist",
- }
+ },
+ "files": [
+ "src/index.tsx",
+ ],
+ "include": [
+ "src/**/*",
+ ],
+ "exclude": [
+ "./node_modules",
+ "./dist"
+ ]
}mkdir src<!-- src/index.html -->
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>Simple React app with webpack</title>
</head>
<body>
<div id='root'></div>
</body>
</html>// src/index.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
const App = () => {
return <h1>Simple React App with webpack!</h1>;
};
const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);npm startnpm run build