React webpack 開發環境安裝

2021/01/24閱讀時間約 2 分鐘
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:
為什麼會看到廣告
20會員
161內容數
留言0
查看全部
發表第一個留言支持創作者!