You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.8 KiB
83 lines
1.8 KiB
2 years ago
|
#Browsersync - Webpack + React Hot Loader
|
||
|
|
|
||
|
|
## Installation/Usage:
|
||
|
|
|
||
|
|
To try this example, follow these 4 simple steps.
|
||
|
|
|
||
|
|
**Step 1**: Clone this entire repo
|
||
|
|
```bash
|
||
|
|
$ git clone https://github.com/Browsersync/recipes.git bs-recipes
|
||
|
|
```
|
||
|
|
|
||
|
|
**Step 2**: Move into the directory containing this example
|
||
|
|
```bash
|
||
|
|
$ cd bs-recipes/recipes/webpack.react-hot-loader
|
||
|
|
```
|
||
|
|
|
||
|
|
**Step 3**: Install dependencies
|
||
|
|
```bash
|
||
|
|
$ npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
**Step 4**: Run the example
|
||
|
|
```bash
|
||
|
|
$ npm start
|
||
|
|
```
|
||
|
|
|
||
|
|
### Additional Info:
|
||
|
|
|
||
|
|
To see `react-hot-loader` in action, edit `js/HelloWorld.jsx`
|
||
|
|
|
||
|
|
|
||
|
|
### Preview of `app.js`:
|
||
|
|
```js
|
||
|
|
/**
|
||
|
|
* Require Browsersync along with webpack and middleware for it
|
||
|
|
*/
|
||
|
|
var browserSync = require('browser-sync');
|
||
|
|
var webpack = require('webpack');
|
||
|
|
var webpackDevMiddleware = require('webpack-dev-middleware');
|
||
|
|
var webpackHotMiddleware = require('webpack-hot-middleware');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Require ./webpack.config.js and make a bundler from it
|
||
|
|
*/
|
||
|
|
var webpackConfig = require('./webpack.config');
|
||
|
|
var bundler = webpack(webpackConfig);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Run Browsersync and use middleware for Hot Module Replacement
|
||
|
|
*/
|
||
|
|
browserSync({
|
||
|
|
server: {
|
||
|
|
baseDir: 'app',
|
||
|
|
|
||
|
|
middleware: [
|
||
|
|
webpackDevMiddleware(bundler, {
|
||
|
|
// IMPORTANT: dev middleware can't access config, so we should
|
||
|
|
// provide publicPath by ourselves
|
||
|
|
publicPath: webpackConfig.output.publicPath,
|
||
|
|
|
||
|
|
// pretty colored output
|
||
|
|
stats: { colors: true }
|
||
|
|
|
||
|
|
// for other settings see
|
||
|
|
// http://webpack.github.io/docs/webpack-dev-middleware.html
|
||
|
|
}),
|
||
|
|
|
||
|
|
// bundler should be the same as above
|
||
|
|
webpackHotMiddleware(bundler)
|
||
|
|
]
|
||
|
|
},
|
||
|
|
|
||
|
|
// no need to watch '*.js' here, webpack will take care of it for us,
|
||
|
|
// including full page reloads if HMR won't work
|
||
|
|
files: [
|
||
|
|
'app/css/*.css',
|
||
|
|
'app/*.html'
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
```
|
||
|
|
|