#Webpack-dev-server tests with react-hot-loader
###Overview A set of three tests of react-hot-loader module for Webpack. Specifically, for how it handles source maps with webpack-dev-server.
###To Install Tests Open a terminal at the webpack-dev-server-test folder and enter:
npm install
In same terminal enter:
npm run startX
where "X" should be replaced with the number of the test, "1", "2" or "3".
Once webpack-dev-server is running, open http://localhost:8080 in the Chrome browser. In your JavaScript editor of choice, edit app/HelloWorld.jsx to add something, like a number, to the Hello World text inside the returned span, then save the file.
All testing done with Google Chrome's Dev Tools.
npm run start1
devtool parameter is set to "source-map". The loaders are 'react-hot' and 'babel'.
When I run this, hotloading works correctly - i.e when HelloWorld.jsx is resaved, the "Hello World" text on the page updates without a full page refresh. However, source maps do not update correctly.
Looking via Chrome Dev Tools' Sources tab, the contents of HelloWorld.jsx remains as they were after the update/rebuild. What happens is that a new version of the file is generated alongside the original. This new version will be called something like HelloWorld.jsx?8872. Yes, this new version contains the updated content that I added to HelloWorld.jsx in my editor, which is a success. Unfortunately, this behaviour is only good for a single update. For any subsequent updates/rebuilds, the HelloWorld.jsx?8872 file remains unchanged; it still contains the content from the first update. No new version of the file is generated by any subsequent updates/rebuilds.
npm run start2
devtool parameter is set to "source-map". The loaders is 'babel' only.
When I run this, hotloading does not work correctly - i.e when HelloWorld.jsx is resaved, the "Hello World" text on the page updates but after a full page refresh. Source maps do update correctly though.
npm run start3
devtool parameter is set to "eval". The loaders are 'react-hot' and 'babel'.
When I run this, hotloading works correctly - i.e when HelloWorld.jsx is resaved, the "Hello World" text on the page updates without a full page refresh. However, source maps do not update at all.
npm run start4
devtool parameter is set to "eval". The loaders are 'react-hot' and 'babel'.
When I run this, hotloading works correctly - i.e when HelloWorld.jsx is resaved, the "Hello World" text on the page updates without a full page refresh. However, source maps do not update at all.