Express 結(jié)合 Webpack 實(shí)現(xiàn)HMR
本篇文件主要講結(jié)合 Webpack 和 Express 實(shí)現(xiàn)前后端熱更新開(kāi)發(fā)，如果你還不太了解webpack推薦閱讀
What
什么是 webpack dev server
Webpack dev server 是一個(gè)輕量的node.js express服務(wù)器乎折，實(shí)現(xiàn)了 webpack 編譯代碼實(shí)時(shí)輸出更新蒸其。在前后端分離的前端項(xiàng)目開(kāi)發(fā)中經(jīng)常用到。不過(guò)這篇文章應(yīng)該不會(huì)講到它碍彭。
webpack dev middleware
Webpack dev middleware 是 WebPack 的一個(gè)中間件晤硕。它用于在 Express 中分發(fā)需要通過(guò) WebPack 編譯的文件悼潭。單獨(dú)使用它就可以完成代碼的熱重載（hot reloading）功能。
特性：
- 不會(huì)在硬盤中寫入文件窗骑，完全基于內(nèi)存實(shí)現(xiàn)女责。
- 如果使用 watch 模式監(jiān)聽(tīng)代碼修改漆枚，Webpack 會(huì)自動(dòng)編譯创译，如果在 Webpack 編譯過(guò)程中請(qǐng)求文件，Webpack dev middleware 會(huì)延遲請(qǐng)求墙基，直到編譯完成之后再開(kāi)始發(fā)送編譯完成的文件软族。
webpack hot middleware
Webpack hot middleware 它通過(guò)訂閱 Webpack 的編譯更新，之后通過(guò)執(zhí)行 webpack 的 HMR api 將這些代碼模塊的更新推送給瀏覽器端残制。
HMR
HMR 即 Hot Module Replacement 是 Webpack 一個(gè)重要的功能立砸。它可以使我們不用通過(guò)手動(dòng)地刷新瀏覽器頁(yè)面實(shí)現(xiàn)將我們的更新代碼實(shí)時(shí)應(yīng)用到當(dāng)前頁(yè)面中。
HMR 的實(shí)現(xiàn)原理是在我們的開(kāi)發(fā)中的應(yīng)用代碼中加入了 HMR Runtime初茶，它是 HMR 的客戶端（瀏覽器端 client）用于和開(kāi)發(fā)服務(wù)器通信颗祝，接收更新的模塊。服務(wù)端工作就是前面提到的 Webpack hot middleware 的恼布，它會(huì)在代碼更新編譯完成之后通過(guò)以 json 格式輸出給HMR Runtime 就會(huì)更具 json 中描述來(lái)動(dòng)態(tài)更新相應(yīng)的代碼螺戳。
How
webpack 配置
先來(lái)在webpack配置文件中引入
var webpack = require('webpack');
var HotMiddleWareConfig = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'
module.exports = {
context: __dirname,
entry: [
// 添加一個(gè)和HotMiddleWare通信的客戶端
HotMiddleWareConfig,
// 添加web應(yīng)用入口文件
'./client.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
devtool: '#source-map',
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
// 在 webpack 插件中引入 webpack.HotModuleReplacementPlugin
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
};
webpack-hot-middleware example webpack.config.js
在我們的開(kāi)發(fā)環(huán)境中是這樣配置的。getEntries 是自動(dòng)根據(jù)我們規(guī)則獲取到入口文件并加上 webpack hot middle 配置折汞。
var webpack = require('webpack');
var path = require('path')
var merge = require('webpack-merge')
var baseConfig = require('./webpack.base')
var getEntries = require('./getEntries')
var publicPath = 'http://0.0.0.0:7799/dist/';
var hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';
var assetsInsert = require('./assetsInsert')
module.exports = merge(baseConfig, {
entry: getEntries(hotMiddlewareScript),
devtool: '#eval-source-map',
output: {
filename: './[name].[hash].js',
path: path.resolve('./public/dist'),
publicPath: publicPath
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new assetsInsert()
]
})
Express 中的配置
在 Express 的配置主要就4個(gè)步驟：
- 引入 webpack 的配置文件和 生成 webpack 的編譯器
- 將編譯器連接至 webpack dev middleware
- 將編譯器連接至 webpack hot middleware
- 定義 express 配置
var http = require('http');
var express = require('express');
var app = express();
app.use(require('morgan')('short'));
// ************************************
// This is the real meat of the example
// ************************************
(function() {
// Step 1: 引入 webpack 的配置文件和 生成 webpack 的編譯器
var webpack = require('webpack');
var webpackConfig = require(process.env.WEBPACK_CONFIG ? process.env.WEBPACK_CONFIG : './webpack.config');
var compiler = webpack(webpackConfig);
// Step 2: 將編譯器掛載給 webpack dev middleware
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath
}));
// Step 3: 將編譯器掛載給 webpack hot middleware
app.use(require("webpack-hot-middleware")(compiler, {
log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000
}));
})();
// 定義 express 配置
app.get("/", function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.get("/multientry", function(req, res) {
res.sendFile(__dirname + '/index-multientry.html');
});
if (require.main === module) {
var server = http.createServer(app);
server.listen(process.env.PORT || 1616, function() {
console.log("Listening on %j", server.address());
});
}
webpack-hot-middleware example server.js
區(qū)分開(kāi)發(fā)和生產(chǎn)環(huán)境
要注意的是一定要在定義 express router 前定義 webpack 相關(guān)的中間件倔幼。還有一點(diǎn)是這里server.js 只是開(kāi)發(fā)環(huán)境中使用，在生成環(huán)境中我們就不需要再用到它們了爽待。
所以在我們實(shí)際的使用中需要通過(guò)定義環(huán)境變量來(lái)區(qū)分開(kāi)發(fā)和生產(chǎn)環(huán)境
var NODE_ENV = process.env.NODE_ENV || 'production';
var isDev = NODE_ENV === 'development';
if (isDev) {
var webpack = require('webpack'),
webpackDevMiddleware = require('webpack-dev-middleware'),
webpackHotMiddleware = require('webpack-hot-middleware'),
webpackDevConfig = require('./build/webpack.config.js');
var compiler = webpack(webpackDevConfig);
app.use(webpackDevMiddleware(compiler, {
publicPath: webpackDevConfig.output.publicPath,
noInfo: true,
stats: {
colors: true
}
}));
app.use(webpackHotMiddleware(compiler));
routerConfig(app, {
dirPath: __dirname + '/server/routes/',
map: {
'index': '/',
'api': '/api/*',
'proxy': '/proxy/*'
}
});
var reload = require('reload');
var http = require('http');
var server = http.createServer(app);
reload(server, app);
app.use(express.static(path.join(__dirname, 'public')));
server.listen(port, function(){
console.log('App (dev) is now running on port ' + port + '!');
});
} else {
routerConfig(app, {
dirPath: __dirname + '/server/routes/',
map: {
'index': '/',
'api': '/api/*',
'proxy': '/proxy/*'
}
});
app.use(express.static(path.join(__dirname, 'public')));
app.listen(port, function () {
console.log('App (dev) is now running on port ' + port + '!');
});
}
supervisor
以上在前端我們實(shí)現(xiàn)了前端文件的熱更新损同，但是我們?cè)谛薷姆?wù)端文件的時(shí)候，并不會(huì)使Node自動(dòng)重啟鸟款，所以我們使用 supervisor 來(lái)作為監(jiān)聽(tīng)文件修改事件來(lái)自動(dòng)重啟 Node服務(wù)膏燃。
supervisor 需要 全局安裝
npm install supervisor -g
安裝完成之后我們就可以在命令行中使用
我們?cè)?package.json 的 scripts 中寫好常用的命令，之后只用 npm run xxx 即可使用
"scripts": {
"dev": "export NODE_ENV=development && supervisor -w server,app.js app",
"build": "node build/build.js",
"start": "node app"
},
supervisor [options] <program>
supervisor -w server,app.js app
-w 就是一個(gè) options 配置項(xiàng)何什，它用于監(jiān)聽(tīng)指定目錄或者文件的變更组哩，可以使用，分隔富俄，監(jiān)聽(tīng)多個(gè)目錄或者文件禁炒，這就是監(jiān)聽(tīng)了 server 目錄和根目錄的 app.js 到變更之后就會(huì)重啟我們的 Express 入口文件 app。
