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

原文連接
此文是我同事寫的，搭建Express結合Webpack。如下是正文，後面我會附上個人解讀

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）功能。

特性：

• 不會在硬盤中寫入文件，徹底基於內存實現。

• 若是使用 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"
  },

node-supervisor

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自動從新，一個文件熱更新，結合起來，基本不須要本身不停的手動刷新瀏覽器，並且能保存當前狀態，這點很關鍵，能節省很多時間，提高開發效率。

• 固然也有痛點，例如要多一個模板文件，並且文件目錄要根據規範來，要不是不會渲染的。

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