hot module replacement in browser-sync

Question

I like using browser-sync for my js server because it has some features that I need except [HMR] "Hot Module Replacement". I mean it does replace the css files without reloading the page but when it comes to js files it reload my whole page unlike webpack-dev-server.

webpack-dev-server just replace the the file no matter whether it's css file or js but browser-sync just does the HMR for css.

Is there any special config or I need to write some code? how can I have it in browser-sync?

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
    })
  ]
}

reference: https://www.npmjs.com/package/browser-sync-webpack-plugin