Express結合Webpack的全棧自動刷新
來自： https://segmentfault.com/a/1190000004505747
在以前的一篇文章 BrowserSync，迅捷從免F5開始 中，我介紹了BrowserSync這樣一個出色的開發工具。通過BrowserSync我感受到了這樣一個理念：如果在一次 ctrl + s 保存后可以自動刷新，然后立即看到新的頁面效果，那會是很棒的開發體驗。
現在， webpack 可以說是最流行的模塊加載器（module bundler）。一方面，它為前端靜態資源的組織和管理提供了相對較完善的解決方案，另一方面，它也很大程度上改變了前端開發的工作流程。在應用了webpack的開發流程中，想要繼續“自動刷新”的爽快體驗，就可能得額外做一些事情。
webpack與自動刷新##!
本文并不打算介紹webpack，如果你還不清楚它是什么，推薦閱讀下面幾篇入門文章：
webpack要求靜態資源在被真正拿來訪問之前，都要先完成一次編譯，即運行完成一次 webpack 命令。因此，自動刷新需要調整到適當的時間點。也就是說，修改了css等源碼并保存后，應該先觸發一次webpack編譯，在編譯完成后，再通知瀏覽器去刷新。
開發Express項目的問題
現在有這樣的一個應用了webpack的 Express 項目，目錄結構如下：
其中， client 內是前端的靜態資源文件，比如css、圖片以及瀏覽器內使用的javascript。 server 內是后端的文件，比如express的routes、views以及其他用node執行的javascript。根目錄的 app.js ，就是啟動express的入口文件了。
開發的時候我們會怎樣做呢？
先啟動Express服務器，然后在瀏覽器中打開某個頁面，接下來再編輯源文件。那么，問題就來了，比如我編輯 .scss 源文件，即使我只改了一小點，我也得在命令行里輸入 webpack 等它編譯完，然后再切到瀏覽器里按一下F5，才能看到修改后的效果。
再比如，我修改了 routes 里的 .js 文件想看看結果，我需要到命令行里重啟一次Express服務器，然后同樣切到瀏覽器里按一下F5。
這可真是太費事了。
所以，我們要讓開發過程愉快起來。
改進目標
我們希望的Express&Webpack項目的開發過程是：
-
如果修改的是 client 里的css文件（包括 .scss 等），保存后，瀏覽器不會整頁刷新，新的樣式效果直接更新到頁面內。
-
如果修改的是 client 里的javascript文件，保存后，瀏覽器會自動整頁刷新，得到更新后的效果。
-
如果修改的是 server 里的文件，保存后，服務器將自動重啟，瀏覽器會在服務器重啟完畢后自動刷新。
經過多次嘗試，我最終得到了一個實現了以上這些目標的項目配置。接下來，本文將說明這個配置是如何做出來的。
從webpack-dev-server開始
首先，webpack已經想到了開發流程中的自動刷新，這就是webpack-dev-server。它是一個靜態資源服務器，只用于開發環境。
一般來說，對于純前端的項目（全部由靜態html文件組成），簡單地在項目根目錄運行webpack-dev-server，然后打開html，修改任意關聯的源文件并保存，webpack編譯就會運行，并在運行完成后通知瀏覽器刷新。
和直接在命令行里運行 webpack 不同的是，webpack-dev-server會把編譯后的靜態文件全部保存在內存里，而不會寫入到文件目錄內。這樣，少了那個每次都在變的webpack輸出目錄，會不會覺得更清爽呢？
如果在請求某個靜態資源的時候，webpack編譯還沒有運行完畢，webpack-dev-server不會讓這個請求失敗，而是會一直阻塞它，直到webpack編譯完畢。這個對應的效果是，如果你在不恰當的時候刷新了頁面，不會看到錯誤，而是會在等待一段時間后重新看到正常的頁面，就好像“網速很慢”。
webpack-dev-server的功能看上去就是我們需要的，但如何把它加入到包含后端服務器的Express項目里呢？
webpack-dev-middleware和webpack-hot-middleware
Express本質是一系列middleware的集合，因此，適合Express的webpack開發工具是 webpack-dev-middleware 和 webpack-hot-middleware 。
webpack-dev-middleware是一個處理靜態資源的middleware。前面說的webpack-dev-server，實際上是一個小型Express服務器，它也是用webpack-dev-middleware來處理webpack編譯后的輸出。
webpack-hot-middleware是一個結合webpack-dev-middleware使用的middleware，它可以實現瀏覽器的無刷新更新（hot reload）。這也是webpack文檔里常說的HMR（Hot Module Replacement）。
參考webpack-hot-middleware的 文檔 和 示例 ，我們把這2個middleware添加到Express中。
webpack配置文件部分
首先，修改webpack的配置文件（為了方便查看，這里貼出了 webpack.config.js 的全部代碼）：
var webpack = require('webpack');
var path = require('path');
var publicPath = 'http://localhost:3000/';
var hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';
var devConfig = {
entry: {
page1: ['./client/page1', hotMiddlewareScript],
page2: ['./client/page2', hotMiddlewareScript]
},
output: {
filename: './[name]/bundle.js',
path: path.resolve('./public'),
publicPath: publicPath
},
devtool: 'source-map',
module: {
loaders: [{
test: /.(png|jpg)$/,
loader: 'url?limit=8192&context=client&name=[path][name].[ext]'
}, {
test: /.scss$/,
loader: 'style!css?sourceMap!resolve-url!sass?sourceMap'
}]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
module.exports = devConfig;</pre>
這是一個包含多個entry的較復雜的例子。其中和webpack-hot-middleware有關的有兩處。一是 plugins 的位置，增加3個插件，二是 entry 的位置，每一個entry后都增加一個 hotMiddlewareScript 。
hotMiddlewareScript 的值是 webpack-hot-middleware/client?reload=true ，其中 ? 后的內容相當于為webpack-hot-middleware設置參數，這里 reload=true 的意思是，如果碰到不能hot reload的情況，就整頁刷新。
在這個配置文件中，還有一個要點是 publicPath 不是 / 這樣的值，而是 http://localhost:3000/ 這樣的絕對地址。這是因為，在使用 ?sourceMap 的時候，style-loader會把css的引入做成這樣：
這種 blob 的形式可能會使得css里的 url() 引用的圖片失效，因此建議用帶 http 的絕對地址（這也只有開發環境會用到）。有關這個問題的詳情，你可以查看 github上的issue 。
Express啟動文件部分
接下來是Express啟動文件內添加以下代碼：
var webpack = require('webpack'),
webpackDevMiddleware = require('webpack-dev-middleware'),
webpackHotMiddleware = require('webpack-hot-middleware'),
webpackDevConfig = require('./webpack.config.js');
var compiler = webpack(webpackDevConfig);
// attach to the compiler & the server
app.use(webpackDevMiddleware(compiler, {
// public path should be the same with webpack config
publicPath: webpackDevConfig.output.publicPath,
noInfo: true,
stats: {
colors: true
}
}));
app.use(webpackHotMiddleware(compiler));</pre>
以上這段代碼應該位于Express的routes代碼之前。其中，webpack-dev-middleware配置的 publicPath 應該和webpack配置文件里的一致。
webpack-dev-middleware和webpack-hot-middleware的靜態資源服務只用于開發環境。到了線上環境，應該使用 express.static() 。
到此， client 部分的目標就完成了。現在到網頁里打開控制臺，應該可以看到 [HMR] connected 的提示。這個項目中我只要求css使用HMR，如果你希望javascript也使用HMR，一個簡單的做法是在entry文件內添加以下代碼：
if(module.hot) {
module.hot.accept();
}
這樣，與這個entry相關的所有 .js 文件都會使用hot reload的形式。關于這一點的更多詳情，請參考 hot module replacement 。
接下來是 server 部分。
reload和supervisor
server 部分的自動刷新，會面臨一個問題：自動刷新的消息通知依靠的是瀏覽器和服務器之間的web socket連接，但在 server 部分修改代碼的話，一般都要重啟服務器來使變更生效（比如修改 routes ），這就會斷開web socket連接。
所以，這需要一個變通的策略：瀏覽器這邊增加一個對web socket斷開的處理，如果web socket斷開，則開啟一個稍長于服務器重啟時間的定時任務（ setTimeout ），相當于等到服務器重啟完畢后，再進行一次整頁刷新。
reload 是一個應用此策略的組件，它可以幫我們處理服務器重啟時的瀏覽器刷新。
現在，還差一個監聽 server 文件，如果有變更就重啟服務器的組件。參考reload的推薦，我們選用 supervisor 。
下面將reload和supervisor引入到Express項目內。
監聽文件以重啟服務器
通過以下代碼安裝 supervisor （是的，必須 -g ）：
npm install supervisor -g
然后，在 package.json 里設置新的 scripts ：
"scripts": {
"start": "cross-env NODE_ENV=dev supervisor -i client app"
}
這里的主要變化是從 node app 改為 supervisor -i client app 。其中 -i 等于 --ignore ，這里表示忽略 client ，顯然，我們可不希望在改前端代碼的時候服務器也重啟。
這里的 cross-env 也是一個npm組件，它可以處理windows和其他Unix系統在設置環境變量的寫法上不一致的問題。
把會重啟的服務器和瀏覽器關聯起來
把Express啟動文件最后的部分做這樣的修改：
var reload = require('reload');
var http = require('http');
var server = http.createServer(app);
reload(server, app);
server.listen(3000, function(){
console.log('App (dev) is now running on port 3000!');
});</pre>
Express啟動文件的最后一般是 app.listen() 。參照reload的說明，需要這樣用 http 再增加一層服務。
然后，再到Express的視圖文件views里，在底部增加一個 <script> ：
<% if (env !== "production") { %>
<script src="/reload/reload.js"></script>
<% } %>
所有的views都需要這樣一段代碼，因此最好借助模板引擎用include或extends的方式添加到公共位置。
這里的 reload.js 和前面webpack的開發環境 bundle.js 并不沖突，它們一個負責前端源文件變更后進行編譯和刷新，另一個負責在服務器發生重啟時觸發延時刷新。
到此， server 也完成了。現在，修改項目內的任意源文件，按下 ctrl + s ，瀏覽器里的頁面都會對應地做一次“適當”的刷新。
完整示例
完整示例已經提交到github： express-webpack-full-live-reload-example
效果如下：
附加的可選方案
前面說的 server 部分，分為views和routes，如果只修改views，那么服務器并不需要重啟，直接刷新瀏覽器就可以了。
針對這樣的開發情景，可以把views文件的修改刷新變得更快。這時候我們不用reload和supervisor，改為用browsersync，在Express的啟動文件內做如下修改：
var bs = require('browser-sync').create();
app.listen(3000, function(){
bs.init({
open: false,
ui: false,
notify: false,
proxy: 'localhost:3000',
files: ['./server/views/**'],
port: 8080
});
console.log('App (dev) is going to be running on port 8080 (by browsersync).');
});
然后，使用browsersync提供的新的訪問地址就可以了。這樣，修改views（html）的時候，由browsersync幫忙直接刷新，修改css和javascript的時候繼續由webpack的middleware來執行編譯和刷新。
結語
有了webpack后，沒有自動刷新怎么干活？
說起來，能做出像這樣的全棧刷新，大概也是得益于Express和Webpack都是javascript，可以很容易地結合、協作的緣故吧。
（重新編輯自我的博客，原文地址： http://acgtofe.com/posts/2016/02/full-live-reload-for-express-with-webpack ）
</div>