React開發有兩種方式，一種是使用CDN方式include react的官方lib，然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。
但是在react中還會使用到sass, scss等等，還需要額外編譯成css瀏覽器才看得懂。
而webpack的誕生，就是為了解決上述的問題，透過設定即可將所有東西一次編譯打包，build出編譯後可以直接讓瀏覽器執行的程式，不用擔心瀏覽器看不看得懂。
因此，再開始React hello world之前，先建立webpack開發環境，並初步了解webpack如何打包app，之後下一篇再開始進入React主題。1. 安裝node.js
為了使用webpack，首先需要先安裝node.js環境。
2. 安裝webpack
$ npm install webpack -g
$ npm install webpack-cli -g
$ webpack -v
建立hello world專案:
首先建立一個react_hello_world資料夾，然後cd到該目錄，下這個指令:
$ npm init -y
接著會看到裡面產生了一個package.json檔案，這是用來記錄這個專案用到哪些套件的!
接著下這個指令:
$ npm install webpack --save-dev
$ npm install webpack-cli --save-dev
打開package.json會發現，多出一個devDependencies裡面有定義webpack，意思是開發環境我們會用到webpack 5.17.0這個版本。
使用webpack打包js:
(1) 在專案目錄下建立index.js:
(2) 建立webpack.config.js:
(3) 建立index.html:
放在public下，因為等等build出來的js會在public下。
並在head include bundle.js。
(4) 使用webpack打包js:
$ webpack --mode development
$ webpack --mode production
development與production是用來指定環境，若是生產環境，會壓縮程式碼。
這邊要用admin權限打開cmd再執行，否則會出現類似這樣的錯誤:
webpack : 因為這個系統上已停用指令碼執行，所以無法載入....
(5) 最後用瀏覽器打開index.html:
完整source code:
本筆記參考:
1. https://ithelp.ithome.com.tw/articles/10200329
2. https://awdr74100.github.io/2020-02-17-webpack-install/
