2022 第4週 實作筆記：React App 與 webpack
2022-01-28 20:22 React TypeScript webpack
總結
記錄如何在 React App 中使用 webpack 5 達成以下需求：
- 配合
typescript - 可使用閱讀性較高的自定義
import path - 支援 hot reload：修改 React App 內容並存檔後，需直接反應在
localhost畫面上
版本與環境
webpack: 5.67.0
webpack-cli: 4.9.2
webpack-dev-server: 4.7.3筆記
packages
npm i --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader css-loader html-webpack-plugin webpack webpack-cli webpack-dev-server
自定義 import path
有兩處需處理，參考原始碼 webpack.config.js （38 行）與 tsconfig.json（3~6 行）
實作後即可在 src 資料夾中的任何檔案內使用 @Component/ 直接引用任何位在 src/components/ 內的元件，不再需要考慮資料夾的相對位置；範例如下：
hot reload
參考 webpack.config.js （10-12 行）
package.json script 設定
如下，指定 webpack.config.js 路徑；之後直接在終端輸入 npm run dev 即可啟動 React App，並支援 hot reload
"dev": "webpack serve --config config/webpack.config.js"