浏览器同步中更换热模块

Question

我喜欢在我的js服务器上使用浏览器同步，因为除了[HMR]＆＃34; Hot Module Replacement＆＃34;它有一些我需要的功能。我的意思是它确实替换了css文件而没有重新加载页面，但是当涉及到js文件时，它重新加载我的整个页面，而不像webpack-dev-server。

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

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

Answer 1

打击/外壳

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