摘要：假設后臺使用端口，我們使用模式需要如下配置現在可以啟動服務了，但同時請求也要修改為這樣才能進行熱加載。

webpack 提供了 webpack-dev-server 可以實現高效的頁面自動刷新，但是這個 server 有一點局限性：

雖然可以做為 server 中間件使用，但本身不提供其它資源的靜態服務

對于打包文件以外的變化它是無知的，也就無法去刷新

如果是自己的頁面需要引入 script，修改配置 entry，自己另外提供文件服務，步驟繁瑣

現在假設我們有自己的 html 頁面，頁面引入了本地的 css，但是 js 是由 webpack 打包的，需要實現文件修改自動刷新的頁面的話我們需要以下幾個模塊：

文件監視 - gulp.watch()

靜態資源服務 - gulp-serve 模塊

livereload服務 (負責接受變化請求并通知頁面刷新) - gulp-livereload 模塊

自動添加 livereload 前端腳本 - connect-livereload 模塊 (或者使用livereload瀏覽器插件）

代碼如下：

// npm i gulp-serve gulp-livereload webpack gulp-util gulp connect-livereload -D
var serve = require("gulp-serve")
var livereload = require("gulp-livereload")
var webpack = require("webpack")
var gutil = require("gulp-util")
var gulp = require("gulp")
var webpackConfig = require("./webpack.config.js")
var inject = require("connect-livereload")()
var path = require("path")
var myConfig = Object.create(webpackConfig)
// for debugging
myConfig.devtool = "sourcemap"
myConfig.debug = true

var paths = {
  scripts: ["index.js"],
  // file list for watching
  asserts: ["*.css", "index.html"]
}

gulp.task("default", ["build-dev"])

gulp.task("build-dev", ["webpack:build-dev", "serve"], function () {
  livereload.listen({
    start: true
  })
  // build js files on change
  gulp.watch(paths.scripts, ["webpack:build-dev"])
  var watcher = gulp.watch(paths.asserts)
  watcher.on("change", function (e) {
    livereload.changed(e.path)
  })
})

// static server
gulp.task("serve", serve({
  root: [__dirname],
  // inject livereload script ot html
  middleware: inject
}))

var devCompiler = webpack(myConfig)
var outputFile = path.resolve(myConfig.output.path, myConfig.output.filename)

gulp.task("webpack:build-dev", function (callback) {
  devCompiler.run(function (err, stats) {
    if (err) throw new gutil.pluginError("webpack:build-dev", err) //eslint-disable-line
    gutil.log("[webpack:build-dev]", stats.toString({
      colors: true
    }))
    livereload.changed(outputFile)
    callback()
  })
})

這種做法最大的好處就是 html 和 css 不用都讓 webpack 去處理也能做到自動刷新，但是相比 webpack-dev-server, 它是JS全部重新打包的，所以性能會差很多，此時我們可以使用 webpack-dev-server 實現打包文件的監聽，同時讓原來后臺提供其它文件服務。假設后臺使用 3000 端口，我們使用 webpack-dev-server inline模式需要如下配置：

gulp.task("webpack:dev-server", function () {
  var devServerConfig = Object.create(myConfig)
  // webpack need this to send request to webpack-dev-server
  devServerConfig.output.publicPath = "http://localhost:8080/"
  devServerConfig.plugins = devServerConfig.plugins || []
  devServerConfig.plugins.push(new webpack.HotModuleReplacementPlugin())
  // inline mode
  devServerConfig.entry.unshift("webpack-dev-server/client?http://localhost:8080", "webpack/hot/dev-server")
  var compiler = webpack(devServerConfig)
  new WebpackDevServer(compiler, {
    contentBase: "http://localhost:3000/",
    // Set this as true if you want to access dev server from arbitrary url.
    // This is handy if you are using a html5 router.
    historyApiFallback: false,
    // Don"t forget this for dev-server
    publicPath: "/build/",
    lazy: false,
    hot: true
  }).listen(8080, "localhost", function (err) {
    if (err) throw new gutil.PluginError("webpack-dev-server", err)
    // Server listening
    gutil.log("[webpack-dev-server]", "http://localhost:8080/")
  })
})

gulp webpack:dev-server 現在可以啟動服務了，但同時請求 bundle.js script也要修改為：

這樣 webpack-dev-server 才能進行熱加載。

還有一種看起來更好的方式是使用 proxy 來代理，此時你訪問 webpack-dev-server時它無法處理的請求都會轉發給你的后臺服務，配置起來相比上面要簡單一些：

html 頁面無需修改

config.output.publicPath 使用原來的相對路徑

webpack-dev-server 配置 proxy 選項

gulp.task("webpack:dev-server", function () {
  var devServerConfig = Object.create(myConfig)
  // webpack need this to send request to webpack-dev-server
  devServerConfig.plugins = devServerConfig.plugins || []
  devServerConfig.plugins.push(new webpack.HotModuleReplacementPlugin())
  // inline mode
  devServerConfig.entry.unshift("webpack-dev-server/client?http://localhost:8080", "webpack/hot/dev-server")
  var compiler = webpack(devServerConfig)
  new WebpackDevServer(compiler, {
    // contentBase: {target: "http://localhost:3000/"},
    // Set this as true if you want to access dev server from arbitrary url.
    // This is handy if you are using a html5 router.
    historyApiFallback: false,
    proxy: {
      "*": "http://localhost:3000"
    },
    publicPath: "/build/",
    lazy: false,
    hot: true
  }).listen(8080, "localhost", function (err) {
    if (err) throw new gutil.PluginError("webpack-dev-server", err)
    // Server listening
    gutil.log("[webpack-dev-server]", "http://localhost:8080/")
  })
})

這么做只需要訪問 webpack-dev-server 就可以直接訪問頁面，其它設備通過 ip 也能直接訪問到，免去了修改的麻煩。其實 webpack-dev-server 如果可以直接添加靜態文件服務的功能，我們有時就不必折騰的這么麻煩了，大概是作者不想破壞它功能上的簡潔以及避免濫用導致不良的后果吧。