上一节，学习到通过webpack-dev-server搭配HotModuleReplacementPlugin插件可以实现不刷新页面的模块热更新。
最后讲解原理的时候，我们知道webpack-dev-server在内部使用Express搭建搭建了一个小型Node服务来接收处理后的文件，那是什么程序传递文件的呢？
就是webpack-dev-middleware。
webpack-dev-middleware
定义：
webpack-dev-middleware是一个容器(wrapper)，它可以把webpack处理后的文件传递给一个服务器(server)。webpack-dev-server在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。
我们也使用Express，搭配webpack-dev-middleware来实现文件更新功能
我们先搭建一个基础项目骨架
├── dist
│ └── index.html
├── package.json
├── src
│ ├── block.js
│ └── index.js
└── webpack.dev.config.js
复制代码因为是在开发环境需要热更新，所以依然是webpack.dev.config.js
我们来简单配置一下：
npm i webpack webpack-cli webpack-dev-middleware express --save-dev
复制代码webpack.dev.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
}
};
复制代码server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const path = require('path');
const app = express();
const config = require('./webpack.dev.config.js');
const compiler = webpack(config);
// const DIST_DIR = path.join(__dirname, "dist")
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
// 使用静态资源目录，才能访问到/dist/idndex.html
app.use(express.static(config.output.path))
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
复制代码/src/index.js
'use strict'
import { test } from './block.js'
document.write('hello world~')
test()
复制代码/src/block.js
'use strict'
module.exports = {
test: function () {
console.log(12345)
}
}
复制代码/dist/index.html
"en">
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
"X-UA-Compatible" content="ie=edge">
webpack-dev-middleware
复制代码package.json 增加一个命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "server": "node server.js"
},
复制代码npm run server
复制代码我们可以看到已经编译成功，直接访问http://localhost:3000/
然后我们修改一下block.js
'use strict'
module.exports = {
test: function () {
console.log(123456)
}
}
复制代码可以看到重新编译了，这时候我们手动刷新下页面，即可看到修改。
以上就是webpack-dev-middleware的简要学习，我们发现这个中间件也仅仅只是完成了打包文件向服务器的传输，没有实现热加载也没有实现热更新。
这是不能满足开发需求的，所以接下来我要学习一下webpack-hot-middleware了。
I am moving forward.