iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
5
Modern Web

在 React 生態圈內打滾的一年 feat. TypeScript系列 第 6

Day05 | F5 按鍵守護者,讓網頁自動刷新的 Webpack-dev-server

前言

經過前兩篇的轟炸,今天來說點輕鬆的。

在昨天完成了 SCSS 後,應該會有些體會,例如:「天吶,只要修改一點程式碼,就需要重新編譯,這真的合理嗎?」

不合理!

修改完還要重新整理是一件很麻煩的事情,想想你的 F5 或是 command + R,它們平常就很辛苦了,所以在寫網站的時候,通常會搭配 Hot Module Replacement,也就是俗稱的熱刷新,

它在執行時會在本機開啟一個 Port,並將目前執行的專案運行在上面,且只要有修改,都會即時刷新頁面上的內容。


前置準備

  1. 文中的專案會以前一天的專案架構繼續講解,如果未跟到前一天的進度,可以從 GitHub 上 Clone 下來。
  2. 一顆擁有學習熱忱的心。

使用方法

安裝 webpack-dev-server

npm install webpack-dev-server --save-dev

設置 webpack-dev-server

開啟 webpack.config.js,為了讓 webpack-dev-server 順利執行,我們需要進行一些設置:

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist/'),
  },
 
  /*其餘省略*/
 
  devServer: {
    contentBase: './dist',
    port: 8080,
  },
};

上方 devServer 中的內容,分別指定了 webpack-dev-server 要去讀哪個路徑,及要運行在本機的哪個 Port。

Port 的部分只要不衝突就行了,路徑的部分記得要和上方打包時的 output.path 相同。

設定指令

開啟 package.json,在 script 中添加指令:

/* 其餘省略 */
"scripts": {
  /* 其餘省略 */
  "start": "webpack-dev-server"
},

感謝邦友 matuyou0301 留言補充:

如果有人遇到無法執行的問題~
For webpack-cli 3.x:

"scripts": { "start:dev": "webpack-dev-server" }

For webpack-cli 4.x:

"scripts": { "start:dev": "webpack serve" }

運行 webpack-dev-server

在終端機中執行指令 npm run start,會跳出以下畫面,如果看到最後一行的 Compiled successfully. 就代表成功運行,如果有錯誤的話再麻煩截圖留言讓我看看:

接著打開瀏覽器,在網址列輸入 http://localhost:8080, 就能夠看到運行的畫面了:

此時,在 webpack-dev-server 運行的期間更動程式碼,例如字體顏色,儲存後,webpack-dev-sever 就會自動重新編譯,並刷新網頁上的畫面:

但是要注意!webpack-dev-server 的刷新,並不會更動到 dist 內的檔案,它只負責將結果運行在本機上,僅此而已。

當要更新時,還是得透過 npm run build,也就是 webpack -p,才能將最新的內容打包編譯 。

本文的原始碼內容一樣會放置於 GitHub 上,歡迎各位參考使用。


結尾

要是沒有 webpack-dev-server 或其他熱刷新,對前端來說真的是一件非常痛苦的事情,今天的內容比較簡單,如果文章中有問題或是不清楚的部分,再麻煩各位留言告訴我,謝謝大家!


上一篇
Day04 | SCSS 加上 Webpack 混搭款,讓你寫 CSS 上天堂
下一篇
Day06 | 一次說完 JSX 基本用法
系列文
在 React 生態圈內打滾的一年 feat. TypeScript31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
matuyou0301
iT邦新手 5 級 ‧ 2021-04-12 16:57:36

寫在package.json裡的script要根據webpack-cli的版本做更動唷~~
如果有人遇到無法執行的問題~
For webpack-cli 3.x:

"scripts": { "start:dev": "webpack-dev-server" }

For webpack-cli 4.x:

"scripts": { "start:dev": "webpack serve" }

神Q超人 iT邦研究生 5 級 ‧ 2021-04-23 22:27:18 檢舉

太感謝你了,我加到文章裡面!

0
ShawnGood
iT邦新手 5 級 ‧ 2022-03-17 22:02:39

謝謝分享!

不過新版的contentBase已經不能用了

options has an unknown property 'contentBase'. These properties are valid:

如果有人跟我遇到一樣的問題
可以參考這裡
https://www.cnblogs.com/leah-blogs/articles/15617199.html

a83133223 iT邦新手 5 級 ‧ 2022-10-27 21:42:36 檢舉

感謝提供,用了您與m大提供的,我就能正常執行了
分享一下,前面安裝sass時,有報錯出現要安裝python等依賴包,就懶的用了直接npm i sass,安裝之後到目前為止都很正常,至於之後會不會出現什麼問題就到時候再說了/images/emoticon/emoticon07.gif

0
ken12462
iT邦新手 5 級 ‧ 2022-04-20 17:33:28

謝謝分享!
目前在實做這個範例的時候有遇到
https://ithelp.ithome.com.tw/upload/images/20220420/20118516LWCam43Ogt.jpg
我試了有兩種方法可以解決(應該也不算解決,算是忽略警告)
1.

module.exports = {
    ...
    mode: 'development',
    ...
}
module.exports = {
    ...
    mode: 'production',
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    },
    ...
}

我要留言

立即登入留言