接續上一篇，這邊要來寫一個React hello world app，最後安裝webpack-dev-server來提升開發效率。
使用npm安裝react, react-dom:$ npm install react react-dom --save
dependencies下紀錄的是生產環境會用到的套件，這邊不使用--save-dev是因為生產環境也會用到react。
建立app.jsx:
修改index.html:
值得一提的是，跟上篇不同，這次把bundle.js放在body的最後，主要是因為scope問題，jsx中有取得root element的語法，因此才要放在這。
index.js跟上篇一樣不變:
接著，由於瀏覽器只看得懂javascript，因此為了將jsx編譯成js，需安裝babel loader與core:
$ npm install babel-loader --save-dev
$ npm install @babel/core --save-dev
安裝@babel/preset-react，主要用來把jsx檔案編譯成javascript:
$ npm install @babel/preset-react --save-dev
安裝翻譯ES6語法的preset，用來將ES6語法編譯成ES5:
$ npm install @babel/preset-env --save-dev
設定webpack.config.js:
entry中加入app.jsx，即jsx的內容也會被編譯到public/bundle.js去。
module下的rules的.jsx那邊的設定，意思是副檔名.jsx的檔案使用preset-react編譯成javascript ES6，再用preset-env編譯成ES5語法。
.js的設定則是把.js使用preset-env編譯成ES5語法。
最後打包:
$ webpack --mode production
打開index.html:
打開bundle.js會發現程式碼被編譯與壓縮過了:
如果每次改完code就要打包一次，然後網頁再重新整理一次來測試，這樣會累死啊!
可以安裝webpack-dev-server這個好用的東西，來簡化這個流程:
$ npm install webpack-dev-server -g
修改webpack.config.js:
這邊指定開啟的port為9000，若沒指定預設是8080。
這邊要記得設定contentBase，因為我們輸出的bundle.js是指定到public下，如果沒有設定這個，dev server會不work，也就是你code存檔了，但卻沒即時刷新瀏覽器。
開啟server指令:
$ webpack-dev-server
指令如果覺得很長麻煩，可以做以下設定:
設定package.json:
加入紅框的設定，之後可以直接執行:
$ npm run open
來打開dev server!
後來發現執行後出現這個error，是因為webpack-cli 4已經删除了webpack-cli/bin/config-yargs文件，因此要uninstall改裝3的版本:
$ npm uninstall webpack-cli
$ npm install webpack-cli [email protected] -S
接著你每次改程式碼儲存後，就會自動幫你build, refresh瀏覽器，是不是很方便呢?
另外如果IDE是用VSCode，甚至不用輸入指令直接點Debug icon就執行dev server了，如下圖紅框:
開啟localhost:9000，接著更動app.jsx儲存，會發現瀏覽器會即時更新:
完整source code:
本筆記參考:
1. https://ithelp.ithome.com.tw/articles/10200459
2. https://juejin.cn/post/6883375553395720199
3. https://stackoverflow.com/questions/36039146/webpack-dev-server-compiles-files-but-does-not-refresh-or-make-compiled-javascri
