React webpack 開發環境安裝

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/