接續上一篇,這邊要來寫一個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的版本:
接著你每次改程式碼儲存後,就會自動幫你build, refresh瀏覽器,是不是很方便呢?
另外如果IDE是用VSCode,甚至不用輸入指令直接點Debug icon就執行dev server了,如下圖紅框:
開啟localhost:9000,接著更動app.jsx儲存,會發現瀏覽器會即時更新:
完整source code: