服务端运行Webpack

之前介绍过DevServer便于搭建一个小型Http服务器，便于我们本地开发调试。DevServer是基于Express中Webpack-dev-middlewar中间件实现的。

下面给出一份如何使用Webpack-dev-middleware在Express搭建的Node服务端程序中应用Webpack的代码：

const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);
const express = require('express');
const app = express();

app.use(
    middleware(compiler, {
    
    
        // webpack-dev-middleware options
        // learn more:https://www.npmjs.com/package/webpack-dev-middleware
    })
);
app.listen(3000, () => console.log('Example app listening	port 3000!'));

服务端使用Webpack-dev-middle有如下好处：

没有文件写入磁盘，而是处理内存中的文件
如果文件以监视模式更改，则中间件将延迟请求，直到编译完成。
支持热模块重新加载（HMR）。
exprss应用上注册路由，拦截http请求，根据请求路径响应对应的文件内容。

Webpack-dev-midlleware能够让Http服务其返回Webpack构建出的内容，所以特别适用于后段接口服务采用Node.js编写的项目。当后台服务接入该中间件后，就可以实现服务端渲染，假如想实现一个404页面，可以进行如下配置：

app.get('/404', (req, res) => {
    
    
    res.sendFile(path.resolve(__dirname, 'pages/404.html'), 'text/html');
})

到目前为止，该程序只能编译一次，DevServer中很强大的一个功能就是热更新，为了在该程序中实现热更新功能，需要使用Webpck-hot-middleware中间件。app.js中新增配置如下：

app.use(require("webpack-hot-middleware")(compiler))

为了实现热更新还需要在Webpack配置文件进行如下配置：

module.exports = {
    
    
    entry: [
        // 引入客户端脚本
        "webpack-hot-middleware/client",
        "./src/index.js"
    ],
    plugins: [
        new HtmlwebpackPlugin({
    
    
            template: './src/index.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
}

别忘了之前学习热更新的时候，需要在入口文件添加如下代码：

if (module.hot) {
    
    
    module.hot.accept()
}

Webpack-dev-middleware中间件，还有很多配置选项，比如设置请求头，限制请求方式等等，这里不做展开，感兴趣的可以前往https://www.npmjs.com/package/webpack-dev-middleware进行查阅。

本章节提供案例源码下载:https://gitee.com/mvc_ydb/webpack/blob/master/nodewebpack.zip

34 服务端运行Webpack

服务端运行Webpack

おすすめ