webpack学习之路（三）webpack-dev-middleware

上一节，学习到通过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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack-dev-middleware</title>
  <script src="./index.js"></script>
</head>
<body>
</body>
</html>
复制代码

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了。

链接文章

webpack学习之路（五）loader初识及常用loader介绍

webpack学习之路（四）webpack-hot-middleware实现热更新

webpack学习之路（二）webpack-dev-server实现热更新

webpack学习之路（一）基础配置 I am moving forward.