使用webpack-dev-middleware 和 webpack-hot-middleware 配置一个dev-server

　　关于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")
//使用前别忘了installconst 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/ ，转载请注明出处。