浏览器同步中的热模块替换

【问题标题】：hot module replacement in browser-sync浏览器同步中的热模块替换
【发布时间】：2017-06-22 19:52:23
【问题描述】：

我喜欢为我的 js 服务器使用浏览器同步，因为它具有我需要的一些功能，除了 [HMR] “热模块更换”。我的意思是它确实在不重新加载页面的情况下替换了 css 文件，但是当涉及到 js 文件时，它会重新加载我的整个页面，这与 webpack-dev-server 不同。

webpack-dev-server 只是替换文件，无论是 css 文件还是 js，但是 browser-sync 只是为 css 做 HMR。

是否有任何特殊配置或我需要编写一些代码？如何在浏览器同步中使用它？

【问题讨论】：

标签： webpack webpack-dev-server browser-sync

【解决方案1】：

bash/shell

npm install --save-dev browser-sync browser-sync-webpack-plugin

webpack.config.js

const BrowserSyncPlugin = require("browser-sync-webpack-plugin")

module.exports = {
  devServer: {
    port: 3100
  },
  plugins: [
    new BrowserSyncPlugin({
      host: "localhost",
      port: 3000,
      // url for WebpackDevServer
      proxy: "http://localhost:3100"
    }, {
      // prevent BrowserSync from reloading
      // let WebpackDevServer handle it
      reload: false
    })
  ]
}

参考：https://www.npmjs.com/package/browser-sync-webpack-plugin

【讨论】：