Express 結(jié)合 Webpack 實(shí)現(xiàn)HMR

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了崇仁免費(fèi)建站歡迎大家使用！

本篇文件主要講結(jié)合 Webpack 和 Express 實(shí)現(xiàn)前后端熱更新開發(fā)，如果你還不太了解webpack推薦閱讀

webpack 官網(wǎng)文檔

What

什么是 webpack dev server

Webpack dev server 是一個(gè)輕量的node.js express服務(wù)器，實(shí)現(xiàn)了 webpack 編譯代碼實(shí)時(shí)輸出更新。在前后端分離的前端項(xiàng)目開發(fā)中經(jīng)常用到。不過這篇文章應(yīng)該不會(huì)講到它。

webpack dev middleware

Webpack dev middleware 是 WebPack 的一個(gè)中間件。它用于在 Express 中分發(fā)需要通過 WebPack 編譯的文件。單獨(dú)使用它就可以完成代碼的熱重載(hot reloading)功能。

特性：

• 不會(huì)在硬盤中寫入文件，完全基于內(nèi)存實(shí)現(xiàn)。
• 如果使用 watch 模式監(jiān)聽代碼修改，Webpack 會(huì)自動(dòng)編譯，如果在 Webpack 編譯過程中請求文件，Webpack dev middleware 會(huì)延遲請求，直到編譯完成之后再開始發(fā)送編譯完成的文件。

webpack hot middleware

Webpack hot middleware 它通過訂閱 Webpack 的編譯更新，之后通過執(zhí)行 webpack 的 HMR api 將這些代碼模塊的更新推送給瀏覽器端。

HMR

HMR 即 Hot Module Replacement 是 Webpack 一個(gè)重要的功能。它可以使我們不用通過手動(dòng)地刷新瀏覽器頁面實(shí)現(xiàn)將我們的更新代碼實(shí)時(shí)應(yīng)用到當(dāng)前頁面中。

HMR 的實(shí)現(xiàn)原理是在我們的開發(fā)中的應(yīng)用代碼中加入了 HMR Runtime，它是 HMR 的客戶端(瀏覽器端 client)用于和開發(fā)服務(wù)器通信，接收更新的模塊。服務(wù)端工作就是前面提到的 Webpack hot middleware 的，它會(huì)在代碼更新編譯完成之后通過以 json 格式輸出給HMR Runtime 就會(huì)更具 json 中描述來動(dòng)態(tài)更新相應(yīng)的代碼。

How

webpack 配置

先來在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

在我們的開發(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ū)分開發(fā)和生產(chǎn)環(huán)境

要注意的是一定要在定義 express router 前定義 webpack 相關(guān)的中間件。還有一點(diǎn)是這里server.js 只是開發(fā)環(huán)境中使用，在生成環(huán)境中我們就不需要再用到它們了。所以在我們實(shí)際的使用中需要通過定義環(huán)境變量來區(qū)分開發(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)了前端文件的熱更新，但是我們在修改服務(wù)端文件的時(shí)候，并不會(huì)使Node自動(dòng)重啟，所以我們使用 supervisor 來作為監(jiān)聽文件修改事件來自動(dòng)重啟 Node服務(wù)。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" 
  
  
  },  
 
 

node-supervisor

 
 

  
  
supervisor [options]  
  
  
supervisor -w server,app.js app  
 
 

-w 就是一個(gè) options 配置項(xiàng)，它用于監(jiān)聽指定目錄或者文件的變更，可以使用，分隔，監(jiān)聽多個(gè)目錄或者文件，這就是監(jiān)聽了 server 目錄和根目錄的 app.js 到變更之后就會(huì)重啟我們的 Express 入口文件 app。

我自己的解讀

首先解釋下他原文代碼幾個(gè)難以解釋的點(diǎn)：

• getEntries 這個(gè)是我們自己的載入入口文件的統(tǒng)一方法，具體內(nèi)容其實(shí)我前面的文章提到過，就是規(guī)定好了的，文件夾目錄下的main.js就是我們的入口文件，其他全部忽略，原因也說過，這里再說一次，規(guī)定死了，簡單，方便，利于合作。
• var publicPath = 'http://0.0.0.0:7799/dist/'; 這里publicPath和大家平時(shí)配置Webpack的publicPath 不太一樣的原因，是需要Express能夠認(rèn)出絕對(duì)地址來，因?yàn)槟沩?xiàng)目是Express大于Webpack的。
• routerConfig 這個(gè)方法是我們自己的一個(gè)方法，內(nèi)容前面文章提到過，就是我寫的一個(gè)用來加載所有路由的方法，免得重復(fù)寫各種引用。npm地址
• export NODE_ENV=development 注意這里，windows的環(huán)境可能會(huì)失敗，可以替換成 cross-env NODE_ENV=development

其次說下這么做的原因

• 前面文章也提到了，我司目前前端的整體架構(gòu)是使用Node做中間層,那么問題就是Node渲染層會(huì)高于Webpack層，而且很多時(shí)候，不一定使用SPA的方式，要兼容這個(gè)架構(gòu)，所以才需要這些配置。
• 這個(gè)配置也很好解決了我們開發(fā)中的幾個(gè)痛點(diǎn)，一個(gè)Node自動(dòng)重新，一個(gè)文件熱更新，結(jié)合起來，基本不需要自己不停的手動(dòng)刷新瀏覽器，而且能保存當(dāng)前狀態(tài)，這點(diǎn)很關(guān)鍵，能節(jié)省不少時(shí)間，提升開發(fā)效率。
• 當(dāng)然也有痛點(diǎn)，例如要多一個(gè)模板文件，而且文件目錄要根據(jù)規(guī)范來，要不是不會(huì)渲染的。

***記得這是一個(gè)連續(xù)的文章系列，只看這里你不一定能配置成功!!!!

新聞名稱：如何打造一個(gè)令人愉悅的前端開發(fā)環(huán)境（四）
轉(zhuǎn)載來源：http://uogjgqi.cn/article/cogjdgp.html