在以前的一篇文章自動刷新 從BrowserSync開始中，我介紹了BrowserSync這樣一個出色的開發(fā)工具。通過BrowserSync我感受到了這樣一個理念：如果在一次ctrl + s保存后可以自動刷新，然后立即看到新的頁面效果，那會是很棒的開發(fā)體驗。

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、蕭山網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為蕭山等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

現(xiàn)在，webpack可以說是最流行的模塊加載器（module bundler）。一方面，它為前端靜態(tài)資源的組織和管理提供了相對較完善的解決方案，另一方面，它也很大程度上改變了前端開發(fā)的工作流程。在應(yīng)用了webpack的開發(fā)流程中，想要繼續(xù)“自動刷新”的爽快體驗，就可能得額外做一些事情。

webpack與自動刷新

本文并不打算介紹webpack，webpack要求靜態(tài)資源在被真正拿來訪問之前，都要先完成一次編譯，即運行完成一次webpack命令。因此，自動刷新需要調(diào)整到適當(dāng)?shù)臅r間點。也就是說，修改了css等源碼并保存后，應(yīng)該先觸發(fā)一次webpack編譯，在編譯完成后，再通知瀏覽器去刷新。

開發(fā)Express項目的問題

現(xiàn)在有這樣的一個應(yīng)用了webpack的Express項目，目錄結(jié)構(gòu)如下：

其中，client內(nèi)是前端的靜態(tài)資源文件，比如css、圖片以及瀏覽器內(nèi)使用的javascript。server內(nèi)是后端的文件，比如express的routes、views以及其他用node執(zhí)行的javascript。根目錄的app.js，就是啟動express的入口文件了。

開發(fā)的時候我們會怎樣做呢？

先啟動Express服務(wù)器，然后在瀏覽器中打開某個頁面，接下來再編輯源文件。那么，問題就來了，比如我編輯.scss源文件，即使我只改了一小點，我也得在命令行里輸入webpack等它編譯完，然后再切到瀏覽器里按一下F5，才能看到修改后的效果。

再比如，我修改了routes里的.js文件想看看結(jié)果，我需要到命令行里重啟一次Express服務(wù)器，然后同樣切到瀏覽器里按一下F5。

這可真是太費事了。

所以，我們要讓開發(fā)過程愉快起來。

改進(jìn)目標(biāo)

我們希望的Express&Webpack項目的開發(fā)過程是：

• 如果修改的是client里的css文件（包括.scss等），保存后，瀏覽器不會整頁刷新，新的樣式效果直接更新到頁面內(nèi)。
• 如果修改的是client里的javascript文件，保存后，瀏覽器會自動整頁刷新，得到更新后的效果。
• 如果修改的是server里的文件，保存后，服務(wù)器將自動重啟，瀏覽器會在服務(wù)器重啟完畢后自動刷新。

經(jīng)過多次嘗試，我最終得到了一個實現(xiàn)了以上這些目標(biāo)的項目配置。接下來，本文將說明這個配置是如何做出來的。

從webpack-dev-server開始

首先，webpack已經(jīng)想到了開發(fā)流程中的自動刷新，這就是webpack-dev-server。它是一個靜態(tài)資源服務(wù)器，只用于開發(fā)環(huán)境。

一般來說，對于純前端的項目（全部由靜態(tài)html文件組成），簡單地在項目根目錄運行webpack-dev-server，然后打開html，修改任意關(guān)聯(lián)的源文件并保存，webpack編譯就會運行，并在運行完成后通知瀏覽器刷新。

和直接在命令行里運行webpack不同的是，webpack-dev-server會把編譯后的靜態(tài)文件全部保存在內(nèi)存里，而不會寫入到文件目錄內(nèi)。這樣，少了那個每次都在變的webpack輸出目錄，會不會覺得更清爽呢？

如果在請求某個靜態(tài)資源的時候，webpack編譯還沒有運行完畢，webpack-dev-server不會讓這個請求失敗，而是會一直阻塞它，直到webpack編譯完畢。這個對應(yīng)的效果是，如果你在不恰當(dāng)?shù)臅r候刷新了頁面，不會看到錯誤，而是會在等待一段時間后重新看到正常的頁面，就好像“網(wǎng)速很慢”。

webpack-dev-server的功能看上去就是我們需要的，但如何把它加入到包含后端服務(wù)器的Express項目里呢？

webpack-dev-middleware和webpack-hot-middleware

Express本質(zhì)是一系列middleware的集合，因此，適合Express的webpack開發(fā)工具是webpack-dev-middleware和webpack-hot-middleware。

webpack-dev-middleware是一個處理靜態(tài)資源的middleware。前面說的webpack-dev-server，實際上是一個小型Express服務(wù)器，它也是用webpack-dev-middleware來處理webpack編譯后的輸出。

webpack-hot-middleware是一個結(jié)合webpack-dev-middleware使用的middleware，它可以實現(xiàn)瀏覽器的無刷新更新（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;

網(wǎng)站題目：Express結(jié)合Webpack的全棧自動刷新-創(chuàng)新互聯(lián)
URL標(biāo)題：http://www.chinadenli.net/article30/cccjso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、搜索引擎優(yōu)化、Google、靜態(tài)網(wǎng)站、外貿(mào)建站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)