19.webpack webpack-dev-middleware和webpack-dev-server区别

文章参考

1. webpack-dev-middleware解读
2. webpack-dev-middleware github

什么是webpack-dev-middleware

webpack-dev-middleware,作用就是，生成一个与webpack的compiler绑定的中间件，然后在express启动的服务app中调用这个中间件。

1. 通过watch mode，监听资源的变更，然后自动打包（如何实现，见下文详解);
2. 快速编译，走内存；
3. 返回中间件，支持express的use格式。

webpack明明可以用watch mode，可以实现一样的效果，但是为什么还需要这个中间件呢？

webpack --watch的命令来动态监听文件的改变并实时打包；每次变更，都将新文件打包到本地，就会很慢。如果走内存，效率就会比较高

webpack-dev-server解决的问题

1. webpack-dev-server主要是express＋webpack-dev-middleware，它的作用主要是用来伺服资源文件。
2. 原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹

注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

webpack-dev-middleware 与 webpack-dev-server 关系

简单理解 webpack-dev-server主要是express ＋ webpack-dev-middleware ＋ webpack-hot-middleware

HMR和热加载的区别？

热加载是刷新整个页面。

webpack-dev-middleware 安装

npm install webpack-dev-middleware --save-dev

基本使用模板

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('../webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
}));

app.use('/huangbiao', router)

app.listen(3000, function () {
   console.log("Example app listening on port 3000!\\n");
});

扩展express 额外请求

const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");

const app = express();
const config = require("../webpack.config.js");
var router = express.Router();

/*
 * 测试发送ajax请求，返回JSON给前台
 * res.json 直接返回JSON数据
 * */
router.get("/ajax", function(req, res, next) {
  res.json(200, {
    username: "黄彪",
    pwd: "123456"
  });
});

// /* res.render 是服务器端渲染，页面跳转到views/test/index.html页面中 */
// router.get('/cors', function(req, res, next) {
//   res.render('test/index', { name: 'Express 路由1' });
// });

const compiler = webpack(config);

app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
  })
);

// 可以测试 http://localhost:3000/huangbiao/ajax 请求
app.use("/huangbiao", router);

app.listen(3000, function() {
  console.log("Example app listening on port 3000!\\n");
});

1. 浏览器输入 http://localhost:3000/huangbiao/ajax 返回的是 JSON对象
2. 浏览器输入 http://localhost:3000 是webpack 打包的页面内容

webpack-hot-middleware 热更新

cnpm install --save-dev webpack-hot-middleware