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