webpack-dev-server 其實並不難

原文連接

概述

咱們都知道webpack是一個構建工具，可是在開發測試過程當中，咱們會常常修改代碼後，而後頻繁刷新頁面查看效果，惋惜咱們就是厭舊重複工做的物種。

恰好webpack這個工具，提供了另一個工具——webpack-dev-server，它能夠幫咱們從中解脫。

初試——監聽入口的JS文件

咱們能夠監聽入口文件和其它被它引用（導入）的文件，並在文件更新的時候，通知瀏覽器刷新網頁。

使用webpack-dev-server的方式很簡單：

1. 安裝：npm install --save-dev webpack-dev-server
2. 而後設置服務器的根目錄，默認爲項目的根目錄：

devServer: {
  contentBase: './dist',
}
複製代碼

3. 而後使用指令webpack-dev-server --open就能夠了。也能夠把這個指令放在package.js文件裏的scripts字段裏。

基本原理

其實就是藉助Express開啓一個服務器，而後設置兩個路由出口：

1. 靜態資源出口：能夠經過devServer的字段contentBase設置靜態資源目錄
2. webpack output的出口：默認是/，能夠經過devServer的字段publicPath設置

因此，我能夠看出，webpack output其實就是Express的一個router對象，webpack根據入口文件觀察相關的文件，並在它們發生變化的時候，從新編譯打包，並輸出到router對象上，這樣咱們就能夠訪問該router拿到最新的資源，不過這個資源是放在內存上的，並非文件系統上。

網頁和webpack-dev-server是經過websocket協議互聯的。當監聽到文件變化的時候，會經過websocket通知網頁調用reload接口刷新頁面。

晉級——監聽靜態HTML文件

監聽靜態文件的變化並更新。

步驟：

1. 安裝html-webpack-plugin：npm i -D html-webpack-plugin
2. 安裝raw-loader：npm i -D raw-loader
3. 在配置文件裏配置plugin和loader：

module.exports = {
  mode: 'development',
  entry: './index.js',
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: "./dist/index.html" // 指定HTML模板的路徑
    })
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        use: 'raw-loader'
      }
    ]
  }
}
複製代碼

4. 而後在入口文件index.js裏引用這個HTML模板：require('./dist/index.html')
5. 開啓服務：webpack-dev-server，更新這個index.html就能夠看到刷新了

目前爲止，監聽文件變動後，都是經過通知瀏覽器刷新的方式從新訪問服務器獲取新的資源。

缺陷： 每一個靜態的HTML文件都須要在配置文件裏配置一個HtmlWebpackPlugin。

使用gulp監聽靜態文件

假如咱們只想簡單監聽靜態文件變動，而後讓瀏覽器刷新的話，使用gulp也是不錯的選擇。

1. 安裝必要插件：npm i -D gulp browser-sync run-sequence
2. 而後在gulpfile.js裏指定監聽文件：

var gulp = require('gulp'),
  browserSync = require('browser-sync'),
  runSequence = require('run-sequence');

gulp.task('browserSync', function () {
  browserSync.init({
    server: {
      baseDir: './dist' // 指定服務器的根目錄，默認爲項目的根目錄
    }
  })
});

gulp.task('watch', ['browserSync'], function () {
  gulp.watch('./static/**/*.css', browserSync.reload); // 指定監聽css文件
  gulp.watch('./static/**/*.js', browserSync.reload); // 指定監聽js文件
  gulp.watch('./dist/*.html', browserSync.reload); // 指定監聽html文件
});

gulp.task('default', function (callback) {
  runSequence(['browserSync', 'watch'], callback);
});
複製代碼

說明一下上面的主要兩個字段：server.baseDir用於指定項目的根目錄，gulp.watch()的第一個參數指的是監聽文件路徑，使用的時候須要根據本身的狀況來改變。

3. 最後執行gulp即可。若是終端提示找不到指令的話，能夠經過安裝全局的gulp，或者加個前綴.\node_modules\.bin\gulp，或者在package.js裏添加一條腳本"gulp": "gulp"而後使用指令npm run gulp。

高級——模塊熱替換

熱替換功能其實也沒有那麼神奇。

用一句話描述就是，經過webpack提供的API監聽一個文件，並替換已經存在的模塊——這須要開發者本身提供替換的邏輯。

步驟：

1. 開啓熱替換功能：devServer: true
2. 註冊兩個插件：new webpack.NamedModulesPlugin()和new webpack.HotModuleReplacementPlugin()
3. 在須要監聽的文件裏，用邏輯設置須要熱替換的條件，並提供熱替換的邏輯。

代理功能

若是你有單獨的後端開發服務器 API，而且但願在同域名下發送 API 請求 ，那麼代理某些 URL 會頗有用。

好比在配置文件裏設置：

proxy: {
  "/api": "http://localhost:3000"
}
複製代碼

請求到 /api/users 如今會被代理到請求 http://localhost:3000/api/users。

對於多個代理接口：

proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]
複製代碼

經常使用配置

devServer.compress，啓用gzip壓縮。
devServer.contentBase，告訴服務器從哪裏提供內容。只有在你想要提供靜態文件時才須要。
devServer.host，指定host。使用0.0.0.0可讓局域網內可訪問。
devServer.hot，啓用 webpack 的模塊熱替換特性（Hot Module Replacement）。
devServer.hotOnly，構建失敗的時候是否不容許回退到使用刷新網頁。
devServer.inline，模式切換。默認爲內聯模式，使用false切換到iframe模式。
devServer.open，啓動webpack-dev-server後是否使用瀏覽器打開首頁。
devServer.overlay，是否容許使用全屏覆蓋的方式顯示編譯錯誤。默認不容許
devServer.port，監聽端口號。默認8080。
devServer.proxy，代理，對於另外有單獨的後端開發服務器API來講比較適合。
devServer.publicPath，設置內存中的打包文件的輸出目錄。區別於output.publicPath。
複製代碼

參考

webpack-dev-server使用方法，看完還不會的來找我~ 開發中 Server(devServer) Extra - Make your HTML hot reload gulp+browser-sync 監聽文件實現瀏覽器自動刷新