webpack5でReact&Typescript環境構築
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2FiStock-1161358581.webp?alt=media&token=ad0b1420-efca-49f6-b06f-a1c73d7ce0bd)
こんにちは、久々にNext.jsを使わないプロジェクトがスタートしたので、技術ログを書き起こしました。
まずは、webpack5のインストールしました。
$ npm install --save-dev webpack webpack-cli webpack-merge
webpack.common.jsを作成しました。
const path = require('path');
module.exports = {
entry: {
app: './app/index.tsx',
},
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
filename: '[name].js'
},
};
開発用のwebpack.dev.jsを作成しました。
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
});
本番用のwebpack.prod.jsを作成しました。
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map'
});
続いてreactをinstallします。
$ npm install react react-dom
続いてtypescriptをinstallします。
$ npm install --save-dev typescript
続いて、tsconfig.json作成します。
今回はこちら(https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json)を参考に一部修正し作成しました。
{
"compilerOptions": {
"outDir": "dist",
"module": "commonjs",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"esModuleInterop": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
],
"types": [
"typePatches"
]
}
Reactの型ファイルをinstallします。
$ npm install --save-dev @types/react
続いてwebpack用にts-loaderをinstallします。
$ npm install --save-dev ts-loader
webpack.common.jsにもts-loaderを追記します。
また、resolve.extensionsにも追記しました。
const path = require('path');
module.exports = {
entry: {
app: './app/index.ts',
},
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
filename: '[name].js'
},
module: {
rules: [
{ // 追記しました
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
]
},
resolve: {
extensions: ['.tsx', '.ts'], // 追記しました
},
};
tsxファイルを作成します。
tsxファイルを作成します。
import React from "react"
const Test: React.VFC = () => {
return <div>Test!!!!</div>
}
では、一旦お試し動作確認をします。
package.jsonのscriptsに下記を追加しました。
"start": "webpack --config webpack.dev.js",
$ npm start
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-24%2022.49.32.png?alt=media&token=29b24afb-72fa-473a-a545-a575487d611d)
無事に動作しました。次回はeslintとstyled-component、storybookなどを追加したいと思います。
ここまでお読みくださりありがとうございました。