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

Question

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

webpack-dev-server只是替换文件，无论是css文件还是js，但浏览器同步只是css的HMR。

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

Answer 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