此篇介紹如何加入並使用 webpack-dev-server，並展示 Hot Reload 功能。

安裝 webpack-dev-server

1
npm i -D webpack-dev-server

設定 webpack.config.js

1
2
3
4
5
6
7
8
module.exports = {
  ......
  devServer: {
    contentBase: path.join(__dirname, "dist"), // 從哪裡提供內容
    port: 9000 // http://localhost:9000
  },
  ......
};

設定 package.json

1
2
3
4
5
6
7
8
{
  ......
  "scripts": {
    "dev": "webpack-dev-server --open",
    ......
  },
  ......
}
  • –open: 自動開啟預設瀏覽器

執行 npm 指令

1
npm run dev

就會自動開啟瀏覽器看到預覽的畫面囉！

執行 npm run dev

疑？內容的文字怎麼好像被切掉了。我們趕緊來試試看修改 css 的部分，順便看看 Hot Reload 的威力吧～

關於實時加載（Live Reload）和熱加載（Hot Reload）的區別在於:實時加載應用更新時需要刷新當前頁面，可以看到明顯的全局刷新效果;而熱加載基本上看不出刷新的效果，類似於局部刷新。

測試 Hot Reload

修改 src/app.scss，把字體變形的樣式註解掉

1
2
3
4
5
6
7
body {
    background-color: yellowgreen;
    h1 {
        color: green;
        // transform: scale(1.5);
    }
}

結果 webpack-dev-server 就幫我們即時打包並刷新瀏覽器頁面，所以我們就可以專心的寫code，畫面就會即時的自動更新囉，是不是超方便的啊？

Hot Reload

今天的範例程式檔github，感謝收看。

參考資料