React webpack 開發環境安裝

閱讀時間約 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:
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
發表第一個留言支持創作者!
Vic Lin的沙龍 的其他內容
在select的時候發現回傳的primary key都是0,這時可能是因為primary key為非數字,如果沒有在model定義 auto increment是false, 預設會認為是true,所以要在model中多設定這行: public $incrementing = false; 本筆
1. 進入https://notify-bot.line.me/zh_TW/ 登入line後,點選右上角個人頁面 2. 點選發行權杖, 輸入名稱與要接收通知的群組。 按下發行後,複製token。 3. 記得將LINE Notify這個帳號加入該群組中: 4. 使用curl發送訊息: curl
直接從程式碼來看,假設code這樣寫: $this->customer->select(['id']) ->where('cell_1', '=', $cell_1) ->orWhere(function ($query) use ($cell_2) {  $query->whereNotNull
在Model中常看到這兩個屬性fillable, guarded: protected $fillable=['name','job']; protected $guarded=['user_id']; 其中guarded是黑名單的意思,fillable則是白名單。 這兩個屬性是用來設定是否允許批量
使用者第三方登入如何發送JWT token呢? 以google登入為例,大致上邏輯會是這樣: E 若是DB已有user的資料,從DB table抓出目前登入的user row data,來產生token,並將token回傳給前端。 若沒有資料則把資料存到DB,一樣產生token回傳。 只不過範例中是
建立一個link將public/storage連結至storage/app/public: $ php artisan storage:link 一般我們會把public資源都放在project的public下,如css, js, upload files等等,由於linux virtual
在select的時候發現回傳的primary key都是0,這時可能是因為primary key為非數字,如果沒有在model定義 auto increment是false, 預設會認為是true,所以要在model中多設定這行: public $incrementing = false; 本筆
1. 進入https://notify-bot.line.me/zh_TW/ 登入line後,點選右上角個人頁面 2. 點選發行權杖, 輸入名稱與要接收通知的群組。 按下發行後,複製token。 3. 記得將LINE Notify這個帳號加入該群組中: 4. 使用curl發送訊息: curl
直接從程式碼來看,假設code這樣寫: $this->customer->select(['id']) ->where('cell_1', '=', $cell_1) ->orWhere(function ($query) use ($cell_2) {  $query->whereNotNull
在Model中常看到這兩個屬性fillable, guarded: protected $fillable=['name','job']; protected $guarded=['user_id']; 其中guarded是黑名單的意思,fillable則是白名單。 這兩個屬性是用來設定是否允許批量
使用者第三方登入如何發送JWT token呢? 以google登入為例,大致上邏輯會是這樣: E 若是DB已有user的資料,從DB table抓出目前登入的user row data,來產生token,並將token回傳給前端。 若沒有資料則把資料存到DB,一樣產生token回傳。 只不過範例中是
建立一個link將public/storage連結至storage/app/public: $ php artisan storage:link 一般我們會把public資源都放在project的public下,如css, js, upload files等等,由於linux virtual
你可能也想看
Google News 追蹤
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
此篇主要紀錄PWA開發過程心得,內容為PWA有什麼特色,為何React可以使PWA成為接近App的操作體驗,以概念敘述與簡單開發流程紀錄來介紹PWA。 什麼是漸進式網路應用程式(PWA) PWA擁有傳統網頁和移動應用的優點,使網頁應用程序可以像應用程序一樣運行,提供更加優越的用戶體驗
React Hooks 是 React 16.8 中引入的一組新的 API,允許你在函數組件中使用狀態和其他 React 特性,而不需要寫類組件。 狀態管理: useState 鉤子允許在函數組件中添加狀態。 副作用管理: useEffect 鉤子允許處理副作用,如數據獲取、訂閱和手動 DO
06. React Forms: Dynamically Add New Input Fields On Click || Learn React Through Mini Projects
Thumbnail
前言這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。這一篇會針對三個名詞做一些解釋,這些名詞是建立 R
Thumbnail
前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑
Thumbnail
歐盟委員會(ECHA)於2021年和2022年修訂了REACH下化學品註冊的部分資訊要求。自2023年5月1日起,ECHA將開始根據修訂後的要求檢查每一份新註冊和現有註冊的更新。
Thumbnail
2022年11月29日,英國官方公開了“UK-REACH緩衝期延長”公眾諮詢的結果:根據公眾諮詢的結果,經蘇格蘭和威爾士政府同意,英國環境、食品和鄉村事務部(Defra)將提出二級立法,將UK-REACH註冊提交截止日期延長3年。
Thumbnail
Zustand是什麼?React前端狀態管理 分別講解狀態管理以及Zustand 是什麼?接續下來講解Zustand用法以及Context以及Redux的比較。
Thumbnail
ECHA(歐洲化學品管理局)正式對外公告,稱其在卷宗評估階段可能會考慮註冊人的噸位變化,也就是說在合理的條件下,註冊人在收到卷宗評估草案(draft decision)後可嘗試通過下調噸位來規避一些高噸位的資料增補要求。
Thumbnail
2022年6月22日, 歐洲化學品管理局(ECHA)委員會宣佈,已選定Sharon McGuinness博士為下一任歐洲化學品管理局局長。作為任命程式的一部分,Sharon McGuinness博士暫定於7月4日將在歐洲議會上發表聲明。
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
此篇主要紀錄PWA開發過程心得,內容為PWA有什麼特色,為何React可以使PWA成為接近App的操作體驗,以概念敘述與簡單開發流程紀錄來介紹PWA。 什麼是漸進式網路應用程式(PWA) PWA擁有傳統網頁和移動應用的優點,使網頁應用程序可以像應用程序一樣運行,提供更加優越的用戶體驗
React Hooks 是 React 16.8 中引入的一組新的 API,允許你在函數組件中使用狀態和其他 React 特性,而不需要寫類組件。 狀態管理: useState 鉤子允許在函數組件中添加狀態。 副作用管理: useEffect 鉤子允許處理副作用,如數據獲取、訂閱和手動 DO
06. React Forms: Dynamically Add New Input Fields On Click || Learn React Through Mini Projects
Thumbnail
前言這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。這一篇會針對三個名詞做一些解釋,這些名詞是建立 R
Thumbnail
前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑
Thumbnail
歐盟委員會(ECHA)於2021年和2022年修訂了REACH下化學品註冊的部分資訊要求。自2023年5月1日起,ECHA將開始根據修訂後的要求檢查每一份新註冊和現有註冊的更新。
Thumbnail
2022年11月29日,英國官方公開了“UK-REACH緩衝期延長”公眾諮詢的結果:根據公眾諮詢的結果,經蘇格蘭和威爾士政府同意,英國環境、食品和鄉村事務部(Defra)將提出二級立法,將UK-REACH註冊提交截止日期延長3年。
Thumbnail
Zustand是什麼?React前端狀態管理 分別講解狀態管理以及Zustand 是什麼?接續下來講解Zustand用法以及Context以及Redux的比較。
Thumbnail
ECHA(歐洲化學品管理局)正式對外公告,稱其在卷宗評估階段可能會考慮註冊人的噸位變化,也就是說在合理的條件下,註冊人在收到卷宗評估草案(draft decision)後可嘗試通過下調噸位來規避一些高噸位的資料增補要求。
Thumbnail
2022年6月22日, 歐洲化學品管理局(ECHA)委員會宣佈,已選定Sharon McGuinness博士為下一任歐洲化學品管理局局長。作為任命程式的一部分,Sharon McGuinness博士暫定於7月4日將在歐洲議會上發表聲明。