browser sync - React - webpack hmr -

tinkering webpack , associated stuff first time. trying combine benefits of webpack-dev-server , browser-sync make when update react component browser doesn't reload, uses hot module replacement. there plenty of boilerplates guess, starting scratch.

im point hmr on , listening changes. edit component , receives change , says app date. view doesn't change few seconds later web socket error.

if hard read says web socket error, socket closed before completing handshake...

my webpack config

const webpack = require("webpack"); const path = require("path"); const src_dir = path.resolve(__dirname,'src'); const dist_dir = path.resolve(__dirname,'dist'); const htmlwebpackplugin = require('html-webpack-plugin'); const cleanwebpackplugin = require('clean-webpack-plugin'); const extracttextplugin = require("extract-text-webpack-plugin"); const browsersyncplugin = require('browser-sync-webpack-plugin');  module.exports = {      entry: [         'react-hot-loader/patch',         'webpack/hot/only-dev-server',         `${src_dir}/index.js`     ],     output: {         path: dist_dir,         publicpath: '',         filename: 'bundle.js'      },      module: {         rules: [             {                 test: /\.scss$/,                 use: extracttextplugin.extract({                     fallback: 'style-loader',                     use: ['css-loader','sass-loader']                 })             },             {                 test: /\.(png|svg|jpg|gif)$/,                 use: ['file-loader']             },             {                 test: /\.js?$/,                 use: ['babel-loader'],                 include: src_dir             }             ]     },      plugins: [         new cleanwebpackplugin(['dist']),         new htmlwebpackplugin({             inject: false,             template: require('html-webpack-template'),             appmountid: 'root',             devserver: '0.0.0.0' +':'+ 8081,             title: "webpack 4 react"         }),         new extracttextplugin("styles.css"),         new webpack.hotmodulereplacementplugin(),         new webpack.namedmodulesplugin(),         new browsersyncplugin({             host: process.env.ip,             port: process.env.port,             //server: { basedir: ['dist'] },             ui: {                 port: 8082             },             proxy: process.env.ip +':'+ 8081         },         {             reload: false         }         )         ],      devtool: 'source-map',      devserver: {         publicpath:'',         host: process.env.ip,         port: 8081,         hot: true     } }; 

babel portion of package.json

  "babel": {     "presets":["es2015","react"],     "plugins": ["react-hot-loader/babel"] } 

many moving pieces , approaches make tough thing pin down. feel if isn't optimal setup, close getting work. after all, browser-sync page getting hmr json wds. maybe have missed simple. 1 strange thing concept of public path example, can't seem work unless empty string. said day 1 webpack, still have lot learn here. thanks.

i should add index.js, entry point webpack

import { appcontainer } 'react-hot-loader'; import react 'react'; import reactdom 'react-dom'; import app './components/app'; import './styles.scss';  const root = document.getelementbyid("root"); //reactdom.render(<app/>,root);  const render = component =>   reactdom.render(     <appcontainer>       <component />     </appcontainer>,     root   );  render(app);  if (module.hot) module.hot.accept('./components/app', () => render(app)); 

just follow have got things working, minor changes code above. first thing in index.js. missing declaration new updated component. so:

if (module.hot) module.hot.accept('./components/app', () => render(app)); 

is replaced following:

if (module.hot) module.hot.accept('./components/app', () => {   const newapp = require("./components/app").default;   render(newapp); }); 

since using react , react-hot-loader, magic done , changes take effect without page reload , losing state. 1 caveat have found if changes involve creating constructor , state component cause page reload, makes sense.

i had change way dealt scss files. using extracttextplugin. after research found better production, , doesn't support hmr. straight webpack docs. had alter webpack.config.js. comment out use of plugin in plugins section , change scss rule following.

{                 test: /\.scss$/,                 use: [                     {                         loader: 'style-loader'                     },{                         loader: 'css-loader'                     },{                         loader: 'sass-loader'                     }                     ]                 /* no hmr better production                 use: extracttextplugin.extract({                     fallback: 'style-loader',                     use: ['css-loader','sass-loader']                 })*/             }, 

the above entire scss rule old stuff commented out can add webpack production config file in future. on next, bringing in redux , react router.