## webpack-dev-middleware
`webpack-dev-middleware` 是一個容器(wrapper)，它可以把 webpack 處理后的文件傳遞給一個服務器(server)。 `webpack-dev-server` 在內部使用了它，同時，它也可以作為一個單獨的包來使用，以便進行更多自定義設置來實現更多的需求。接下來是一個 webpack-dev-middleware 配合 express server 的示例。
安裝
```
yarn add express webpack-dev-middleware -D
```
新建 `conf/server.js` 輸入
```js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.base.js');
const compiler = webpack(config);
// 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
}));
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
```
修改 `conf/webpack.base.js`
```js
const path = require('path');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].[chunkhash].js',
publicPath: '/'
}
};
```
修改 `package.json`
```json
"scripts": {
"start": "webpack-dev-server --config conf/webpack.base.js",
"watch": "webpack --watch --config conf/webpack.base.js",
"build": "webpack",
"server": "node conf/server.js"
},
```
這樣，就可以輸入 `npm run server` 開啟 express 服務器監聽文件變動，使用 webpack 進行打包。
