Vue 之青銅 I ⭐⭐⭐[用 webpack-dev-server 實現修改實時生效]

_Daniel發表於2021-08-28
VueWebdevServer
系列文章：
Vue 之青銅 I ⭐[基本使用] Vue 之青銅 I ⭐⭐[vue和webpack] Vue 之青銅 I ⭐⭐⭐[用 webpack-dev-server 實現修改實時生效] Vue 之青銅 I 晉級 [預先編譯]

有啥問題？

看到瀏覽器 D:/works/demo-webpack/index.html 這樣的路徑，而且每次修改需要儲存檔案,然後去重新整理瀏覽器，這樣的操作讓我覺得自己不是一個程式設計師，必須想辦法改變這種開發方式。於是乎，運轉《有問題就百度》大法後，得到了一個使用 webpack-dev-server 的結果。

什麼是 webpack-dev-server

我也不知道，看文件吧 ↓

webpack 文件 - 開發伺服器(devServer)

簡單理解下：就是一個小型的本地伺服器，可以極大的提高和簡化開發時的除錯速度。
再簡單理解下：本地修改程式碼實時生效

開始

  1. 安裝 webpack-dev-server
    npm install --save-dev webpack-dev-server -g
    webpack-dev-server 應該也是個開箱即用的模組，也有簡單的預設配置
  2. 建立 ./public 資料夾，並把 index.html 移動到 ./public/ 資料夾，命令如下
    mkdir public
mv ./index.html ./public/
  3. 修改 ./public/index.html 並儲存
    <!-- index.html -->
<html>
<body>
 <div id="app">{{ message }}</div>
 <script src="./main.js"></script>
</body>
</html>
  4. 執行命令
    webpack serve
    沒有意外的話，使用瀏覽器開啟 http://localhost:8080/ 成功的看到
    Hello Vue And Webpack!
    這個時候我們去修改 src/index.js 的 message 值
    import {createApp} from 'vue/dist/vue.esm-bundler.js'
const app = createApp({
data () {
 return {
   message: 'Hello Vue And Webpack! Come On!'
 }
}
}).mount('#app')
    儲存，啪！瀏覽器自動重新整理！啪！看到了
    Hello Vue And Webpack! Come On!
    沒錯！這就是我想要的效果！

我發現 public 目錄下並沒有 main.js ，然後把原來 dist 目錄刪除了，但這也並不影響 webpack serve 。所以在這個模式下 main.js 應該是存在記憶體吧…

至此我的目錄如下

node_modules/
public/
 index.html
src/
 index.js
package-lock.json
package.json
webpack.config.js

青銅I ⭐⭐⭐ 我拿下了

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章