服务端运行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