如何打造乙個令人愉悅的前端開發環境（四）

express 結合 webpack 實現hmr

本篇檔案主要講結合 webpack 和 express 實現前後端熱更新開發，如果你還不太了解webpack推薦閱讀

webpack 官網文件

what

什麼是 webpack dev server

webpack dev server 是乙個輕量的node.js express伺服器，實現了 webpack 編譯**實時輸出更新。在前後端分離的前端專案開發中經常用到。不過這篇文章應該不會講到它。

webpack dev middleware

webpack dev middleware 是 webpack 的乙個中介軟體。它用於在 express 中分發需要通過 webpack 編譯的檔案。單獨使用它就可以完成**的熱過載(hot reloading)功能。

特性：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 中描述來動態更新相應的**。

webpack 配置

先來在webpack配置檔案中引入

var webpack = require('webpack');

var hotmiddlewareconfig = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'

module.exports = ,

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 = '';

var hotmiddlewarescript = 'webpack-hot-middleware/client?reload=true';

var assetsinsert = require('./assetsinsert')

module.exports = merge(baseconfig, ,

plugins: [

new webpack.defineplugin(

}),

new webpack.optimize.occurenceorderplugin(),

new webpack.hotmodulereplacementplugin(),

new webpack.noerrorsplugin(),

new assetsinsert()

] })

express 中的配置

在 express 的配置主要就4個步驟：

// step 3: 將編譯器掛載給 webpack hot middleware

log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000

}));

})();

// 定義 express 配置

res.sendfile(__dirname + '/index.html');

});

res.sendfile(__dirname + '/index-multientry.html');

});

if (require.main === module) );

} webpack-hot-middleware example server.js

區分開發和生產環境

要注意的是一定要在定義 express router 前定義 webpack 相關的中介軟體。還有一點是這裡server.js 只是開發環境中使用，在生成環境中我們就不需要再用到它們了。所以在我們實際的使用中需要通過定義環境變數來區分開發和生產環境

以上在前端我們實現了前端檔案的熱更新，但是我們在修改服務端檔案的時候，並不會使node自動重啟，所以我們使用 supervisor 來作為監聽檔案修改事件來自動重啟 node服務。supervisor 需要全域性安裝

npm install supervisor -g

安裝完成之後我們就可以在命令列中使用我們在 package.json 的 scripts 中寫好常用的命令，之後只用 npm run *** 即可使用

"scripts": ,

node-supervisor

supervisor [options]

我自己的解讀

首先解釋下他原文**幾個難以解釋的點：

其次說下這麼做的原因

最後記得這是乙個連續的文章系列，只看這裡你不一定能配置成功!!!!

如何打造乙個令人愉悅的前端開發環境（四）

前端如何定義乙個常量

團隊建設如何打造乙個優秀的團隊

如何打造乙個與眾不同的SEO部落格

如何打造乙個令人愉悅的前端開發環境（四）

前端如何定義乙個常量

團隊建設 如何打造乙個優秀的團隊

如何打造乙個與眾不同的SEO部落格

相關推薦

團隊建設如何打造乙個優秀的團隊