参考にさせていただいたページ
npmモジュールのインストール
webpackとTypeScriptの関連モジュールをインストールします。
yarn add --dev webpack webpack-cli typescript ts-loader
Reactの関連モジュールをインストールします。
yarn add react react-dom @types/react @types/react-dom
package.jsonの編集
生成されたpackage.jsonに少し追記して以下の通りにしました。
{
"scripts": {
"build": "webpack",
"watch": "webpack -w"
},
"devDependencies": {
"ts-loader": "^9.2.6",
"typescript": "^4.4.3",
"webpack": "^5.54.0",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"@types/react": "^17.0.24",
"@types/react-dom": "^17.0.9",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"private": true
}
tsconfig.jsonの作成とその記述内容
ファイルを作成します。
touch tsconfig.json
以下の通り記述しました。
{
"compilerOptions": {
"sourceMap": true,
"target": "ES5", // TSはECMAScript 5に変換
"module": "ES2015", // TSのモジュールはES Modulesとして出力
"jsx": "react-jsx",
"moduleResolution": "node",
"lib": [
"ES2020",
"DOM"
]
},
}
webpack.config.jsの作成とその記述内容
ファイルを作成します。
touch webpack.config.js
以下の通り記述しました。
module.exports = {
mode: 'development',
entry: {
'pages/index': './src/entry-points/index.tsx',
},
// 出力するパスは絶対パスで書きます
output: {
path: `${__dirname}/public/javascripts`,
filename: (arg) => {
return '[name].bundle.js'
},
},
module: {
rules: [
// 拡張子 .ts もしくは .tsx の場合
{
test: /\.tsx?$/,
use: "ts-loader"
}
]
},
resolve: {
// import時に省略できる拡張子を設定
extensions: [".ts", ".tsx", ".js", ".json"]
},
// ES5(IE11等)向けの指定（webpack 5以上で必要）
target: ["web", "es5"],
};
src/entry-points/index.tsxの作成とその記述内容
ディレクトリとファイルを作成します。
mkdir -p src/entry-points touch src/entry-points/index.tsx
以下の通り記述しました。
import * as ReactDOM from 'react-dom';
function App() {
return (
<div>
<h1>Hello React!</h1>
</div>
);
}
ReactDOM.render(<App/>, document.querySelector('#app'));
buildしてみる
以下のコマンドを実行して、一度buildしてみます。
yarn build
これが成功したら public/javascripts/pages/index.bundle.js が生成されます。
public/html/index.htmlの作成とその記述内容
ディレクトリとファイルを作成します。
mkdir public/html touch public/html/index.html
以下の通り記述しました。
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"></div> <script src="../javascripts/pages/index.bundle.js"></script> </body> </html>
動作確認してみる
ブラウザでpublic/html/index.htmlを開いてみると、Hello React! と表示されます。
mountが確認できました。
おわりに
最低限の設定とビルドまでできたので、とりあえず今回はここまでにしておきます。
