vue-cli的webpack模版項目配置解析-build/dev-server.js

我們在使用vue-cli搭建vuejs項目(Vuejs實例-01使用vue-cli腳手架搭建Vue.js項目)的時候，會自動生成一系列文件，其中就包含webpack配置文件。我們現在來看下，這些配置到底是什么意思，對我們開發過程中有什么影響。

項目搭建好了， 使用Bash運行npm run dev， 然后Bash界面會打印出一些東西，之后默認瀏覽器就打開了一個頁面。為什么會有這些動作呢？我們從package.json開始看。

// package.json
{
...
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
...
}

運行npm run dev其實是執行了 build/dev-server.js文件。
那我們現在先分析這個文件，直接上源碼。

// dev-server.js
// 調用check-versions.js 模塊，檢查版本node和npm的版本
require('./check-versions')()

// 獲取配置
var config = require('../config')
// 如果Node的環境變量中沒有設置當前的環境(NODE_ENV), 則使用config中配置的環境作為當前環境
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

// opn模塊，使用默認應用程序，打開網址、文件、 可執行程序等內容的一個插件。
// 例如,使用默認瀏覽器打開urls。跨平台可用。
// 這里用它來調用默認瀏覽器打開dev-server監聽的端口，例如: localhost:8080
var opn = require('opn')
// path模塊提供用於處理文件和目錄路徑的實用程序。
var path = require('path')
// 引入express 模塊
var express = require('express')
// 引入 webpack模塊
var webpack = require('webpack')

// 一個express中間件，用於將http請求代理到其他服務器
// 例：localhost:8080/api/xxx  -->  localhost:3000/api/xxx
// 這里使用該插件可以將前端開發中涉及到的請求代理到API服務器上，方便與服務器對接
var proxyMiddleware = require('http-proxy-middleware')

// 根據 Node 環境來引入相應的 webpack 配置
// 這里用 "testing" 來判斷Node環境, 是因為在兩個webpack.***.conf中還會有判斷
var webpackConfig = process.env.NODE_ENV === 'testing'
  ? require('./webpack.prod.conf')
  : require('./webpack.dev.conf')

// dev-server 監聽的端口，默認為config.dev.port設置的端口，即8080
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port

// 用於判斷是否要自動打開瀏覽器的布爾變量，
// 當配置文件中沒有設置自動打開瀏覽器的時候其值為 false
// `!!`是一個邏輯操作，表示強制轉換類型。這里強制轉換為`bool`類型
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser

// 定義HTTP代理，到自定義API接口
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable

// 創建一個express實例
var app = express()

// 根據webpack配置文件創建Compiler對象
var compiler = webpack(webpackConfig)

// 引入webpack開發中間件, 此插件只在開發環境中有用。
// 使用compiler對象來對相應的文件進行編譯和綁定
// 編譯綁定后將得到的產物存放在內存中而沒有寫進磁盤
// 將這個中間件交給express使用之后即可訪問這些編譯后的產品文件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  //綁定中間件到publicpath中，使用方法和在webpack中相同
  publicPath: webpackConfig.output.publicPath, 
  quiet: true // 允許在console控制台顯示 警告 和 錯誤 信息
})

// 引入熱重載功能的中間件。
// Webpack熱重載僅使用webpack-dev-middleware開發中間件。
// 這個中間件，允許您在沒有webpack-dev-server的情況下，將熱重載功能到現有服務器中。
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  // 用於打印行的功能
  log: () => {}
})

// 當html-webpack-plugin 提交之后通過熱重載中間件發布重載動作使得頁面重載
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// 將 proxyTable 中的代理請求配置掛在express服務器上
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// connect-history-api-fallback 模塊，通過指定的索引頁來代理請求的中間件，對於使用HTML5歷史API的單個頁面應用程序非常有用。
// 處理 HTML5歷史api回退的問題
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())

// 為webpack打包輸出服務
// serve webpack bundle output
app.use(devMiddleware)

// 熱重載和狀態保留功能
// 顯示編譯錯誤信息
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)

// posix屬性提供了對路徑方法的POSIX特定實現的訪問。
// 服務純靜態資源。 利用Express托管靜態文件，使其可以作為資源訪問
// 想要訪問static文件夾下的資源，必須添加 staticPath 返回的地址作為上一級地址。
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))

// 應用啟動時候的訪問地址信息，例如 http://localhost:8080
var uri = 'http://localhost:' + port

// 異步回調
var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log('> Starting dev server...')
// 如果webpack開發中間件有效執行，那么執行后面的回調函數。
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // 如果是 testing 環境， 不需要打開瀏覽器
  // when env is testing, don't need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve()
})

// 啟動express服務器並監聽相應的端口（8080）
var server = app.listen(port)

// 模塊導出。
// 1：執行異步函數
// 2：提供close方法，關閉服務器
module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}

以上，就是我對這個文件的解析。

后續再對其他文件解析...歡迎關注😄

webpack模版配置分析

參考鏈接：
http://blog.csdn.net/hongchh/article/details/55113751