如何打造一個令人愉悅的前端開發環境（四）
Express 結合 Webpack 實現HMR
本篇文件主要講結合 Webpack 和 Express 實現前后端熱更新開發，如果你還不太了解webpack推薦閱讀
What
什么是 webpack dev server
Webpack dev server 是一個輕量的node.js express服務器，實現了 webpack 編譯代碼實時輸出更新。在前后端分離的前端項目開發中經常用到。不過這篇文章應該不會講到它。
webpack dev middleware
Webpack dev middleware 是 WebPack 的一個中間件。它用于在 Express 中分發需要通過 WebPack 編譯的文件。單獨使用它就可以完成代碼的熱重載(hot reloading)功能。
特性：
- 不會在硬盤中寫入文件，完全基于內存實現。
- 如果使用 watch 模式監聽代碼修改，Webpack 會自動編譯，如果在 Webpack 編譯過程中請求文件，Webpack dev middleware 會延遲請求，直到編譯完成之后再開始發送編譯完成的文件。
webpack hot middleware
Webpack hot middleware 它通過訂閱 Webpack 的編譯更新，之后通過執行 webpack 的 HMR api 將這些代碼模塊的更新推送給瀏覽器端。
HMR
HMR 即 Hot Module Replacement 是 Webpack 一個重要的功能。它可以使我們不用通過手動地刷新瀏覽器頁面實現將我們的更新代碼實時應用到當前頁面中。
HMR 的實現原理是在我們的開發中的應用代碼中加入了 HMR Runtime，它是 HMR 的客戶端(瀏覽器端 client)用于和開發服務器通信，接收更新的模塊。服務端工作就是前面提到的 Webpack hot middleware 的，它會在代碼更新編譯完成之后通過以 json 格式輸出給HMR Runtime 就會更具 json 中描述來動態更新相應的代碼。
How
webpack 配置
先來在webpack配置文件中引入
- var webpack = require('webpack');
- var HotMiddleWareConfig = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'
- module.exports = {
- context: __dirname,
- entry: [
- // 添加一個和HotMiddleWare通信的客戶端
- HotMiddleWareConfig,
- // 添加web應用入口文件
- './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
在我們的開發環境中是這樣配置的。getEntries 是自動根據我們規則獲取到入口文件并加上 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個步驟：
- 引入 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
區分開發和生產環境
要注意的是一定要在定義 express router 前定義 webpack 相關的中間件。還有一點是這里server.js 只是開發環境中使用，在生成環境中我們就不需要再用到它們了。所以在我們實際的使用中需要通過定義環境變量來區分開發和生產環境
- 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
以上在前端我們實現了前端文件的熱更新，但是我們在修改服務端文件的時候，并不會使Node自動重啟，所以我們使用 supervisor 來作為監聽文件修改事件來自動重啟 Node服務。supervisor 需要 全局安裝
- npm install supervisor -g
安裝完成之后我們就可以在命令行中使用我們在 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 就是一個 options 配置項，它用于監聽指定目錄或者文件的變更，可以使用，分隔，監聽多個目錄或者文件，這就是監聽了 server 目錄和根目錄的 app.js 到變更之后就會重啟我們的 Express 入口文件 app。
我自己的解讀
首先解釋下他原文代碼幾個難以解釋的點：
- getEntries 這個是我們自己的載入入口文件的統一方法，具體內容其實我前面的文章提到過，就是規定好了的，文件夾目錄下的main.js就是我們的入口文件，其他全部忽略，原因也說過，這里再說一次，規定死了，簡單，方便，利于合作。
- var publicPath = 'http://0.0.0.0:7799/dist/'; 這里publicPath和大家平時配置Webpack的publicPath 不太一樣的原因，是需要Express能夠認出絕對地址來，因為你項目是Express大于Webpack的。
- routerConfig 這個方法是我們自己的一個方法，內容前面文章提到過，就是我寫的一個用來加載所有路由的方法，免得重復寫各種引用。npm地址
- export NODE_ENV=development 注意這里，windows的環境可能會失敗，可以替換成 cross-env NODE_ENV=development
其次說下這么做的原因
- 前面文章也提到了，我司目前前端的整體架構是使用Node做中間層,那么問題就是Node渲染層會高于Webpack層，而且很多時候，不一定使用SPA的方式，要兼容這個架構，所以才需要這些配置。
- 這個配置也很好解決了我們開發中的幾個痛點，一個Node自動重新，一個文件熱更新，結合起來，基本不需要自己不停的手動刷新瀏覽器，而且能保存當前狀態，這點很關鍵，能節省不少時間，提升開發效率。
- 當然也有痛點，例如要多一個模板文件，而且文件目錄要根據規范來，要不是不會渲染的。
***記得這是一個連續的文章系列，只看這里你不一定能配置成功!!!!
