关于Webpack的资料教程网上已经数不胜数，但是对手动配置一个Express server的确不多，于是我对此进行着重的了解一番。
webpack-dev-middleware和webpack-hot-middleware分别是干什么的？
首先这两个插件组合起来是可以实现页面的热刷新工作， 而做到这一点，首先要对更改的文件进行监控，编译，而这个webpack-dev-middleware就是干这个的，专业点叫做伺服器，而webpack-hot-middleware 是用来进行页面的热重载的。而且这些文件资源并不会出现在真实的路径里，而是保存在内存中，如果文件改变，这个伺服器就不在去请求旧的文件，而是延迟请求直到新的文件编译完成。
开始编码
你可以使用一份你之前练手的webpack项目，写好正确的配置文件（webpack.config.js）,基本上会和下面的我的这份类似，并没有太多的东西：
var path = require("path"); var webpack = require("webpack"); //var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {entry: "./src/js/page/index.js", output:{ path : path.join(__dirname,'dist'), publicPath : "/webpack/dist", filename : "js/[name].js" }, module:{ loaders:[ { test: /\.css$/, loader: 'style-loader!css-loader' } ] }, plugins:[ //new ExtractTextPlugin("css/[name].css"),new HtmlWebpackPlugin({ filename:'index.html', template:'./src/view/index.html', inject:true, hash:true, minify:{ removeComments:true, collapseWhitespace:false } }) ] }
使用webpack-dev-middleware
下面在跟目录下新建一个dev-server.js,然后写下如下的代码：
const path = require("path")
const express = require("express")
const webpack = require("webpack")
//使用前别忘了install
const webpackDevMiddleware = require("webpack-dev-middleware")
const webpackConfig = require('./webpack.config.js')
const app = express(),
DIST_DIR = path.join(__dirname, "dist"),
PORT = 9090,
complier = webpack(webpackConfig)
app.use(webpackDevMiddleware(complier, {
publicPath: webpackConfig.output.publicPath,
quiet: true
}))
app.get("*", (req, res, next) =>{
const filename = path.join(DIST_DIR, 'index.html');
complier.outputFileSystem.readFile(filename, (err, result) =>{
if(err){
return(next(err))
}
res.set('content-type', 'text/html')
res.send(result)
res.end()
})
})
app.listen(PORT)
complier = webpack(webpackConfig)会创建一个用来传给webpack-middle-ware的对象，同时我们还可以给他webpack-middle-ware传一些option,比较重要的是这个publicPath, 这个是必传的参数，通常是和你的webpack.config.js
里的publicPath是一致的，然后通过
app.get("*", (req, res, next) =>{
const filename = path.join(DIST_DIR, 'index.html');
complier.outputFileSystem.readFile(filename, (err, result) =>{
if(err){
return(next(err))
}
res.set('content-type', 'text/html')
res.send(result)
res.end()
})
})
这段代码来告诉express去读取文件，这里我并没有直接使用下面这种方式：
app.get("*", (req, res) => {
res.sendFile(path.join(DIST_DIR, "index.html"));
});
这样直接发送文件，因为所有的文件是在内存中的，我们直接去目录里去读是不对的，所以采用上面的方式手动指定文件的加载目录在哪里。
Hot Module Replacement
现在我们已经集成了webpack-dev-middleware，使用这个插件很简单，在webpack.config.js里的入口和插件里进行相应修改：
... entry: ["webpack-hot-middleware/client", "./main"], ... plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ]
修改entry的原因是我们要配置当文件更新时通知服务器：
然后接下来在Express里配置使用webpack-hot-middleware
import webpackHotMiddleware from "webpack-hot-middleware";
...
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
...
app.use(webpackHotMiddleware(compiler));
到这里就已经配置好了，在package.json里添加一个脚本：
"start": "node dev-server.js"
但是事实上这时候你运行npm start 的时候并不能实时刷新，因为
只有接受更新的module才会被热更新过，我们需要所有的文件都热更新，所以在入口文件（我的是./js/page/index.js）里面加上：
if (module.hot) { module.hot.accept(); }
这时候就可以实时刷新了。
坑：
当你使用ExtractTextPlugin时，因为这个插件本身的原因，修改css文件是不会更新的，所以在dev的时候可以不使用这个插件。
注：本文出自博客园 https://home.cnblogs.com/u/mdengcc/ ，转载请注明出处。