leecade / Koa Webpack Middleware
webpack dev&hot middleware for koa2
Stars: ✭ 215
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Koa Webpack Middleware
Vue Webpack Config
Koa2、Webpack、Vue、React、Node
Stars: ✭ 151 (-29.77%)
Mutual labels: webpack, koa, koa2
Koa Mobx React Starter
A straightforward starter for Node javascript web projects. Using Koa, MobX and ReactJS (with universal / isomorphic server rendering)
Stars: ✭ 102 (-52.56%)
Mutual labels: webpack, koa, koa2
Sactive Web
🚀 A dependency injection web framework for Node.js.
Stars: ✭ 143 (-33.49%)
Mutual labels: koa, koa2
Kirby Webpack
💪 A Kirby CMS starter-kit with modern frontend tools
Stars: ✭ 150 (-30.23%)
Mutual labels: webpack, hmr
Breko Hub
Babel React Koa Hot Universal Boilerplate
Stars: ✭ 145 (-32.56%)
Mutual labels: webpack, koa
React Hot Loader Loader
A Webpack Loader that automatically inserts react-hot-loader to your App 👨🔬
Stars: ✭ 176 (-18.14%)
Mutual labels: webpack, hmr
Create Elm App
🍃 Create Elm apps with zero configuration
Stars: ✭ 1,650 (+667.44%)
Mutual labels: webpack, hmr
Koa Vue Fullstack
A lightweight boilerplate for a universal webapp based on koa, mongodb, node, vue, and webpack
Stars: ✭ 126 (-41.4%)
Mutual labels: webpack, koa
Bad Ass Salesforce Stack
B.A.S.S. Starter: react / redux / typescript / antd / ts-force / sfdx / webpack / salesforce
Stars: ✭ 126 (-41.4%)
Mutual labels: webpack, hmr
Template Rwb
A full-featured Webpack setup with hot-reload
Stars: ✭ 165 (-23.26%)
Mutual labels: webpack, hmr
Todolist Frontend Vuejs
Front-end application for Todolist Web application built with Laravel and Vue.js
Stars: ✭ 120 (-44.19%)
Mutual labels: webpack, hmr
koa-webpack-middleware
webpack-dev-middleware for koa2 with HMR(hot module replacement) supports.
Install
$ npm i koa-webpack-middleware -D
Depends
This middleware designd for koa2 ecosystem, make sure installed the right version:
npm i [email protected] -S
Usage
See example/ for an example of usage.
import webpack from 'webpack'
import { devMiddleware, hotMiddleware } from 'koa-webpack-middleware'
import devConfig from './webpack.config.dev'
const compile = webpack(devConfig)
app.use(devMiddleware(compile, {
// display no info to console (only warnings and errors)
noInfo: false,
// display nothing to the console
quiet: false,
// switch into lazy mode
// that means no watching, but recompilation on every request
lazy: true,
// watch options (only lazy: false)
watchOptions: {
aggregateTimeout: 300,
poll: true
},
// public path to bind the middleware to
// use the same as in webpack
publicPath: "/assets/",
// custom headers
headers: { "X-Custom-Header": "yes" },
// options for formating the statistics
stats: {
colors: true
}
}))
app.use(hotMiddleware(compile, {
// log: console.log,
// path: '/__webpack_hmr',
// heartbeat: 10 * 1000
}))
HMR configure
-
webpack
plugins
configureplugins: [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ]
-
webpack
entry
configure$ npm i eventsource-polyfill -D
entry: { 'index': [ // For old browsers 'eventsource-polyfill', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', 'index.js'] },
-
webpack
loader
configure$ npm i babel-preset-es2015 babel-preset-stage-0 -D
{ test: /\.js$/, loader: 'babel', query: { 'presets': ['es2015', 'stage-0'] } }, include: './src' }
HMR for react project
$ npm i babel-preset-react babel-preset-react-hmre -D
{ test: /\.jsx?$/, loader: 'babel', query: { 'presets': ['es2015', 'stage-0', 'react'], 'env': { 'development': { 'presets': ['react-hmre'] } } }, include: './src' }
-
put the code in your entry file to enable HMR
React project do not need
if (module.hot) { module.hot.accept() }
That's all, you're all set!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].