-
できるだけ
ts
ファイルで構成する -
dev
はwebpack
のdevServer
で立ち上げる -
create-react-app
ではなく、webpack
でビルドする -
public
配下にmock service worker
を立ち上げるためのコードを配置webpack-dev-server
がwebpack
以外で提供されるリソースをpublic
から取得するnpx msw init public/ --save
でコードを配置できる
-
webpack
のビルド速度改善- 以下のパッケージを導入
esbuild-loader
esbuild
が提供している API を利用して作成された loaderts-loader
より早い- privatenumber/esbuild-loader: ⚡️ Speed up your Webpack build with esbuild
fork-ts-checker-webpack-plugin
ts-loader
の型チェックの部分のみを切り出したプラグインesbuild
,esbuild-loader
の弱点である、型チェックが行えないという問題が解決できる- TypeStrong/fork-ts-checker-webpack-plugin: Webpack plugin that runs typescript type checker on a separate process.
thread-loader
- 各々のファイル拡張子に対応する loader ごとにスレッドを分割し、マルチスレッドで処理を行うことできる
- thread-loader | webpack
- 参考記事
Node.js | 18.0.0 |
npm | 8.6.0 |
React | 18.2.0 |
TypeScript | 4.7.4 |
webpack | 5.73.0 |
webpack-cli | 4.10.0 |
webpack-dev-server | 4.9.3 |
react-router-dom | 6.3.0 |
react-redux | 8.0.2 |
@reduxjs/toolkit | 1.8.2 |
@chakra-ui/react | 2.2.1 |
@emotion/react | 11.9.3 |
@emotion/styled | 11.9.3 |
framer-motion | 6.3.16 |
msw | 0.42.3 |
esbuild-loader | 2.19.0 |
fork-ts-checker-webpack-plugin | 7.2.11 |
thread-loader | 3.0.4 |
npm install
npx msw init public/ --save
npm run dev
dist
を削除するdev
用にビルドするwebpack
のdevServer
で立ち上げる
npm start
dist
を削除するprod
用にビルドするhttp-server
でローカルの HTTP サーバーをで立ち上げる
npm run build
dist
を削除するprod
用にビルドする