Template Upload
This commit is contained in:
46
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/app.js
generated
vendored
Normal file
46
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/app.js
generated
vendored
Normal file
@ -0,0 +1,46 @@
|
||||
/**
|
||||
* 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'
|
||||
]
|
||||
});
|
17
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/app/index.html
generated
vendored
Normal file
17
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/app/index.html
generated
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Browsersync, Webpack + Monkey Hot Loader Example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Browsersync, Webpack + Monkey Hot Loader Example</h1>
|
||||
|
||||
<span id="number">0</span>
|
||||
<button id="inc" type="button">Increase</button>
|
||||
<button id="dec" type="button">Decrease</button>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
24
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/app/main.js
generated
vendored
Normal file
24
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/app/main.js
generated
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
function inc(value) { // Play with me
|
||||
return value + 1;
|
||||
}
|
||||
|
||||
function dec(value) { // and me
|
||||
return value - 1;
|
||||
}
|
||||
|
||||
// IMPORTANT: it won't work as expected if you'll use addEventListener
|
||||
// or $(document).ready as it will bind events again and again...
|
||||
// So you may need some workaround for this or split modules in a particular way
|
||||
window.onload = function() {
|
||||
var number = document.getElementById('number');
|
||||
var incBtn = document.getElementById('inc');
|
||||
var decBtn = document.getElementById('dec');
|
||||
|
||||
incBtn.addEventListener('click', function() {
|
||||
number.innerHTML = inc(+number.innerHTML);
|
||||
}, false);
|
||||
|
||||
decBtn.addEventListener('click', function() {
|
||||
number.innerHTML = dec(+number.innerHTML);
|
||||
}, false);
|
||||
};
|
2
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/desc.md
generated
vendored
Normal file
2
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/desc.md
generated
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
To see `monkey-hot-loader` in action, edit top-level functions (`inc`, `dec`)
|
||||
inside `main.js` file
|
18
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/package.json
generated
vendored
Normal file
18
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/package.json
generated
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "webpack.monkey-hot-loader",
|
||||
"version": "1.0.0",
|
||||
"description": "Webpack + Monkey Hot Loader",
|
||||
"main": "app.js",
|
||||
"author": "Sergey Slipchenko <faergeek@gmail.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "node ."
|
||||
},
|
||||
"dependencies": {
|
||||
"browser-sync": "^2.8.0",
|
||||
"monkey-hot-loader": "0.0.3",
|
||||
"webpack": "^1.10.5",
|
||||
"webpack-dev-middleware": "^1.2.0",
|
||||
"webpack-hot-middleware": "^1.1.0"
|
||||
}
|
||||
}
|
83
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/readme.md
generated
vendored
Normal file
83
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/readme.md
generated
vendored
Normal file
@ -0,0 +1,83 @@
|
||||
#Browsersync - Webpack + Monkey 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.monkey-hot-loader
|
||||
```
|
||||
|
||||
**Step 3**: Install dependencies
|
||||
```bash
|
||||
$ npm install
|
||||
```
|
||||
|
||||
**Step 4**: Run the example
|
||||
```bash
|
||||
$ npm start
|
||||
```
|
||||
|
||||
### Additional Info:
|
||||
|
||||
To see `monkey-hot-loader` in action, edit top-level functions (`inc`, `dec`)
|
||||
inside `main.js` file
|
||||
|
||||
|
||||
### 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'
|
||||
]
|
||||
});
|
||||
|
||||
```
|
||||
|
34
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/webpack.config.js
generated
vendored
Normal file
34
node_modules/bs-recipes/recipes/webpack.monkey-hot-loader/webpack.config.js
generated
vendored
Normal file
@ -0,0 +1,34 @@
|
||||
// For instructions about this file refer to
|
||||
// webpack and webpack-hot-middleware documentation
|
||||
var webpack = require('webpack');
|
||||
var path = require('path');
|
||||
|
||||
module.exports = {
|
||||
debug: true,
|
||||
devtool: '#eval-source-map',
|
||||
context: path.join(__dirname, 'app'),
|
||||
|
||||
entry: [
|
||||
'webpack/hot/dev-server',
|
||||
'webpack-hot-middleware/client',
|
||||
'./main'
|
||||
],
|
||||
|
||||
output: {
|
||||
path: path.join(__dirname, 'app'),
|
||||
publicPath: '/',
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new webpack.optimize.OccurenceOrderPlugin(),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoErrorsPlugin()
|
||||
],
|
||||
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.js$/, exclude: /node_modules/, loaders: ['monkey-hot'] }
|
||||
]
|
||||
}
|
||||
};
|
Reference in New Issue
Block a user