https://github.com/af/hmr-time
Experiments with webpack's Hot Module Replacement
https://github.com/af/hmr-time
Last synced: 12 months ago
JSON representation
Experiments with webpack's Hot Module Replacement
- Host: GitHub
- URL: https://github.com/af/hmr-time
- Owner: af
- Created: 2015-02-23T04:45:57.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-03-30T17:55:53.000Z (about 11 years ago)
- Last Synced: 2024-10-18T07:04:27.671Z (over 1 year ago)
- Language: JavaScript
- Size: 172 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Stop: HMR Time!
This repo is an experiment with [webpack](http://webpack.github.io/),
and more specifically its [Hot Module Replacement
(HMR](http://webpack.github.io/docs/hot-module-replacement-with-webpack.html) feature.
In development, HMR automagically syncs your front-end code with your browser
(without refreshes) as you save it. This code syncs the following files live:
* [Stylus](http://learnboost.github.io/stylus/) styles, run through
[autoprefixer](https://github.com/postcss/autoprefixer)
* [React.js](http://facebook.github.io/react/) components, via
[react-hot-loader](https://github.com/gaearon/react-hot-loader)
* [Babeljs](https://babeljs.io) is also used for ES6 support
## Usage
* Run `node devserver.js`, and open `localhost:8080/app.html` in your browser.
* Edit `main.styl` in your editor, and save it. Watch as your browser loads the
new css changes automatically.
* Edit `simpleform.js` in your editor, and save it. Your browser should pick
up your changes in the same way, _while preserving any local state_ that you
created while using the page.
## Notes/Gotchas
* So far, I can only get HMR working by serving assets from / instead of /assets/
* see https://github.com/webpack/webpack/issues/497
* Can't use HMR with extract-text-webpack-plugin, which is needed to process
& save styles as plain css files.
* Current workaround: inject styles via `require()` when in development,
use regular css files for production/build usage.
* See https://github.com/webpack/extract-text-webpack-plugin/issues/30
## TODO
* Conditional usage of css require (based on NODE_ENV)