如何打造一個(gè)令人愉悅的前端開發(fā)環(huán)境(四)

原文鏈接
此文是我同事寫的,搭建Express結(jié)合Webpack沸呐。以下是正文醇王,后面我會(huì)附上我的解讀

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

本篇文件主要講結(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 編譯過程中請(qǐng)求文件,Webpack dev middleware 會(huì)延遲請(qǐng)求使鹅,直到編譯完成之后再開始發(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)了前端文件的熱更新,但是我們?cè)谛薷姆?wù)端文件的時(shí)候科展,并不會(huì)使Node自動(dòng)重啟均牢,所以我們使用 supervisor 來作為監(jiān)聽文件修改事件來自動(dòng)重啟 Node服務(wù)。
supervisor 需要 全局安裝

  npm install supervisor -g

安裝完成之后我們就可以在命令行中使用
我們?cè)?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 就是一個(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ù)的文章系列茸时,只看這里你不一定能配置成功!8撤谩?啥肌!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末进每,一起剝皮案震驚了整個(gè)濱河市汹粤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌田晚,老刑警劉巖嘱兼,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異贤徒,居然都是意外死亡芹壕,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門接奈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來踢涌,“玉大人,你說我怎么就攤上這事序宦≌霰冢” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵互捌,是天一觀的道長潘明。 經(jīng)常有香客問我,道長秕噪,這世上最難降的妖魔是什么钳降? 我笑而不...
    開封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮腌巾,結(jié)果婚禮上遂填,老公的妹妹穿的比我還像新娘。我一直安慰自己澈蝙,他們只是感情好吓坚,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著灯荧,像睡著了一般礁击。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天客税,我揣著相機(jī)與錄音,去河邊找鬼撕贞。 笑死更耻,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的捏膨。 我是一名探鬼主播秧均,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼号涯!你這毒婦竟也來了目胡?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤链快,失蹤者是張志新(化名)和其女友劉穎誉己,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體域蜗,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡巨双,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了霉祸。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片筑累。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖丝蹭,靈堂內(nèi)的尸體忽然破棺而出慢宗,到底是詐尸還是另有隱情,我是刑警寧澤奔穿,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布镜沽,位于F島的核電站,受9級(jí)特大地震影響巫橄,放射性物質(zhì)發(fā)生泄漏淘邻。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一湘换、第九天 我趴在偏房一處隱蔽的房頂上張望宾舅。 院中可真熱鬧,春花似錦彩倚、人聲如沸筹我。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蔬蕊。三九已至,卻和暖如春哥谷,著一層夾襖步出監(jiān)牢的瞬間岸夯,已是汗流浹背麻献。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留猜扮,地道東北人勉吻。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像旅赢,于是被迫代替她去往敵國和親齿桃。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容