webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper), 它可以把 webpack 处理后的文件传递给一个服务器(server). webpack-dev-server 在内部使用了它, 同时, 它也可以作为一个单独的包来使用, 以便进行更多自定义设置来实现更多的需求。webpack-dev-middleware 的工作如下:

• 根据webpck配置进行打包，放入内存中
• 返回一个函数，充当中间件

准备

---

1. 安装webpack-dev-middleware依赖

   yarn add webpack-dev-middleware -D 

语法

---

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackOptions = require("./webpack.config");

const app = express();
const compiler = webpack(webpackOptions);
app.use(webpackDevMiddleware(compiler, {}));
app.listen(3000, () => {
    console.log('自己实现的 webpack-dev-server 服务启动成功！');
});

原理

---