This commit is contained in:
tatianamac
2019-11-26 14:50:43 -08:00
parent 8a55660ed0
commit 6d5445ecc5
13894 changed files with 2233957 additions and 0 deletions

View File

@ -0,0 +1,9 @@
{
"presets": [
"es2015"
],
"plugins": [
["transform-decorators-legacy"],
["transform-react-jsx", { "pragma": "h" }]
]
}

View File

@ -0,0 +1,2 @@
/node_modules
/app/dist/

View File

@ -0,0 +1,42 @@
/**
* Require Browsersync along with webpack and middleware for it
*/
var browserSync = require('browser-sync').create();
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.dev');
var bundler = webpack(webpackConfig);
/**
*
*/
browserSync.init({
server: '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,35 @@
.hello-world {
margin: 200px 0;
font-size: 70px;
text-align: center;
}
.hello-world__i {
display: inline-block;
-webkit-animation: rotate 4000ms infinite linear;
animation: rotate 4000ms infinite linear;
}
@keyframes rotate {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

View File

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Browsersync, Webpack + Preact Hot Loader Example</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>Browsersync, Webpack + Preact Hot Loader Example</h1>
<div id="preact-root"></div>
<script src="js/bundle.js"></script>
</body>
</html>

View File

@ -0,0 +1,14 @@
import {h, Component} from 'preact';
export default class HelloWorld extends Component {
render() {
// Play with it...
const name = 'World';
return (
<h2 className="hello-world">
<span className="hello-world__i">Hello, {name}</span>
</h2>
);
}
}

View File

@ -0,0 +1,16 @@
import {h, render} from 'preact';
if (module.hot) {
module.hot.accept('./HelloWorld.jsx', () => requestAnimationFrame(() => {
init();
}));
}
let root;
function init() {
const HellowWorld = require('./HelloWorld.jsx').default;
root = render(<HellowWorld />, document.getElementById('preact-root'), root);
}
init();

View File

@ -0,0 +1 @@
To see `preact-hot-loader` in action, edit `js/HelloWorld.jsx`

View File

@ -0,0 +1,29 @@
{
"name": "webpack.preact-hot-loader",
"version": "1.0.0",
"description": "Webpack + Preact Hot Loader",
"main": "app.js",
"author": "Shane Osbourne",
"license": "MIT",
"scripts": {
"start": "node .",
"build": "webpack"
},
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.14.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "^6.14.0",
"babel-register": "^6.14.0",
"babel-runtime": "^6.11.6",
"browser-sync": "^2.8.0",
"compression-webpack-plugin": "^0.3.2",
"preact": "^6.4.0",
"webpack": "^1.10.5",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^1.1.0"
}
}

View File

@ -0,0 +1,78 @@
#Browsersync - Webpack + Preact 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.preact-hot-loader
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
To see `preact-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').create();
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.dev');
var bundler = webpack(webpackConfig);
/**
*
*/
browserSync.init({
server: '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,40 @@
// 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: 'source-map',
context: path.join(__dirname, 'app', 'js'),
entry: [
'webpack/hot/dev-server',
'webpack-hot-middleware/client',
'./main'
],
output: {
path: path.join(__dirname, 'app', 'js'),
publicPath: '/js/',
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.jsx', '.js']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel']
}
]
}
};

View File

@ -0,0 +1,46 @@
// For instructions about this file refer to
// webpack and webpack-hot-middleware documentation
var webpack = require('webpack');
var path = require('path');
var CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
devtool: 'source-map',
context: path.join(__dirname, 'app', 'js'),
entry: [
'./main'
],
output: {
path: path.join(__dirname, 'app', 'dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$/,
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
mangle: true
})
],
resolve: {
extensions: ['', '.jsx', '.js']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel']
}
]
}
};

File diff suppressed because it is too large Load Diff