Template Upload

This commit is contained in:
SOUTHERNCO\x2mjbyrn
2017-05-17 13:45:25 -04:00
parent 415b9c25f3
commit 7efe7605b8
11476 changed files with 2170865 additions and 34 deletions

View 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'
]
});

View 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>

View 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);
};

View File

@ -0,0 +1,2 @@
To see `monkey-hot-loader` in action, edit top-level functions (`inc`, `dec`)
inside `main.js` file

View 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"
}
}

View 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'
]
});
```

View 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'] }
]
}
};