KOA2 to achieve simple webpack-dev-server

KOA2 for easy Webpack-dev-server Thermal update

Original HTTPS://GITHUB.COM/ZHUANGZHOU/BLOG/ISSUES/3

Idle to Nothing, with koa2 a simple webpack-dev-server, in fact, many online Express build hot update, but koa2 few; Welcome to the big guy to shoot bricks and enlighten;
Source

Configure the basic Webpack

1. Download the installation package

• Webpack
• Webpack-cli
• Html-webpack-plugin
• Css-loader
• Style-loader

Since the latest version of Webpack is used here, you need to install WEBPACK-CLI.

2. Create and configure Webpack.config.js

Here is not specifically configured, such as the need for detailed configuration of the tutorial, please go here;

After the basic configuration is complete, configure the Hotmodulereplacementplugin plugin for hot update in plugins, because Hotmodulereplacementplugin is webpack built-in plug-in, so no need to install, direct reference on the line

const webpack = require('webpack');plugins:[    new webpack.HotModuleReplacementPlugin()]

Implement Webpack-dev-middleware's KOA2 middleware

Webpack-dev-middleware is the core middleware to realize webpack-dev-server;

1. Download the installation package

 npm run webpack-dev-middleware -D

2. Create Devmiddleware.js

const webpackDev  = require('webpack-dev-middleware')const devMiddleware = (compiler, opts) => {    const middleware = webpackDev(compiler, opts)    return async (ctx, next) => {        await middleware(ctx.req, {            end: (content) => {                ctx.body = content            },            setHeader: (name, value) => {                ctx.set(name, value)            }        }, next)    }}module.exports=devMiddleware;

Implement Webpack-hot-middleware's KOA2 middleware

1. Download the installation package

npm run webpack-hot-middleware -D

2. Create a Hotmiddleware.js file

const webpackHot = require('webpack-hot-middleware')const PassThrough = require('stream').PassThrough;const hotMiddleware = (compiler, opts) => {    const middleware = webpackHot(compiler, opts);    return async (ctx, next) => {        let stream = new PassThrough()        ctx.body = stream        await middleware(ctx.req, {            write: stream.write.bind(stream),            writeHead: (status, headers) => {                ctx.status = status                ctx.set(headers)            }        }, next)    }    }module.exports = hotMiddleware;

Configuring KOA Portal files and introducing middleware

1. Download the installation package

npm run koa -D

2. Create App.js

const koa = require('koa');const webpack = require('webpack');const app = new koa();const config = require('../webpack.config');const compiler = webpack(config);const devMiddleware = require('./devMiddleware');const hotMiddleware = require('./hotMiddleware');app.use(devMiddleware(compiler, {    noInfo: true,    publicPath: config.output.publicPath}));app.use(hotMiddleware(compiler,{    reload:true}));// app.use(serve(__dirname + '/src/', {//     extensions: ['html']// }));app.listen(3000, () => {    console.log('Example app listening om port 3000!\n');});

Run

1. Configure Run command in Package.json

"scripts": {    "watch": "webpack --watch",    "server": "node server/app.js",    "build": "webpack"}

2. Start the server that you just configured

npm run server

3, solve the problem

When running, enter localhost:3000 in the browser, run successfully, but will not automatically refresh the browser after modifying index.js;

Entry in Webpack.config.js Modify the entry file

entry: {    index: ['webpack-hot-middleware/client?noInfo=true&reload=true','./src/index.js']}

This will automatically refresh the;

About Hot Update html

Here is still a problem, is about the hot update HTML file, because the Html-webpack-plugin plug-in runtime is not through the entry entrance, so you can not automatically compile HTML files;

There are a lot of methods on the Internet, one of which is: Use Raw-loader, the index.html file into the index.js, so you can compile the

module:{    rules:[        {            test:/\.(htm|html)$/,  use: 'raw-loader'        }    ]}

But think about it, this is problematic, is not able to separate the index.html files, so not recommended, is currently studying how to update the heat, follow-up will be more;

Summarize

Reference

KOA2 to achieve simple webpack-dev-server