iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
4
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"
},

運行 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

尚未有邦友留言

立即登入留言