摘要：前言使用過進行項目開發(fā)的同學(xué)，一定知道或者使用過腳手架，他能夠很好的搭建項目結(jié)構(gòu)和工程，讓我們能夠把足夠的精力放在業(yè)務(wù)開發(fā)上。對象提供一系列屬性，用于返回系統(tǒng)信息返回當(dāng)前進程的命令行參數(shù)數(shù)組。

使用過 vue 進行項目開發(fā)的同學(xué)，一定知道或者使用過 vue-cli 腳手架，他能夠很好的搭建項目結(jié)構(gòu)和工程，讓我們能夠把足夠的精力放在業(yè)務(wù)開發(fā)上。也正是因為這樣，很多時候我們會因為項目工期短等原因來不及或則不會刻意去了解項目工程配置，我們今天不去介紹腳手架的使用，我們?nèi)チ私庀履_手架為我們創(chuàng)建好的打包工程是怎么做的。

    ├── build --------------------------------- webpack相關(guān)配置文件
    │   ├── build.js --------------------------webpack打包配置文件
    │   ├── check-versions.js ------------------------------ 檢查npm,nodejs版本
    │   ├── logo.png ---------------------------------- 項目 logo
    │   ├── utils.js --------------------------------------- 配置資源路徑，配置css加載器
    │   ├── vue-loader.conf.js ----------------------------- 配置css加載器等
    │   ├── webpack.base.conf.js --------------------------- webpack基本配置
    │   ├── webpack.dev.conf.js ---------------------------- 用于開發(fā)的webpack設(shè)置
    │   ├── webpack.prod.conf.js --------------------------- 用于打包的webpack設(shè)置
    ├── config ---------------------------------- 配置文件
           ├── index.js ------------------------------ 開發(fā)和生產(chǎn)環(huán)境配置文件
    ├── node_modules ---------------------------- 存放依賴的目錄
    ├── src ------------------------------------- 源碼
    │   ├── assets ------------------------------ 靜態(tài)文件
    │   ├── components -------------------------- 組件
    │   ├── main.js ----------------------------- 主js
    │   ├── App.vue ----------------------------- 項目入口組件
    │   ├── router ------------------------------ 路由
    ├── package.json ---------------------------- node配置文件
    ├── .babelrc--------------------------------- babel配置文件
    ├── .editorconfig---------------------------- 編輯器配置
    ├── .gitignore------------------------------- 配置git可忽略的文件

在看項目配置文件之前，我們先了解下 webpack 幾個常用的工具和插件，如果你已經(jīng)十分熟悉，你可以跳過這一小節(jié)，直接去看，配置文件解析

path 是 node.js 中的一個模塊，用于處理目錄的對象，提高開發(fā)效

常用方法：
path.join(): 用于連接路徑。該方法的主要用途在于，會正確使用當(dāng)前系統(tǒng)的路徑分隔符，Unix 系統(tǒng)是 ”/“，Windows系統(tǒng)是 ”“
path.resolve() 用于將相對路徑轉(zhuǎn)為絕對路徑

常使用的文件路徑
__dirname: 總是返回被執(zhí)行的 js 所在文件夾的絕對路徑
__filename: 總是返回被執(zhí)行的 js 的絕對路徑
process.cwd(): 總是返回運行 node 命令時所在的文件夾的絕對路徑

process對象是Node的一個全局對象，提供當(dāng)前Node進程的信息。

process 對象提供一系列屬性，用于返回系統(tǒng)信息
process.argv：返回當(dāng)前進程的命令行參數(shù)數(shù)組。
process.env：返回一個對象，成員為當(dāng)前Shell的環(huán)境變量，比如process.env.HOME
process.pid：當(dāng)前進程的進程號

簡單說，Source map就是一個信息文件，里面儲存著位置信息。也就是說，轉(zhuǎn)換后的代碼的每一個位置，所對應(yīng)的轉(zhuǎn)換前的位置。有了它，出錯的時候，debug 工具將直接顯示原始代碼，而不是轉(zhuǎn)換后的代碼。這無疑給開發(fā)者帶來了很大方便。webpack 的 devtool里有 7種 SourceMap 模式

開發(fā)環(huán)境(development)和生產(chǎn)環(huán)境(production)的構(gòu)建目標(biāo)差異很大。在開發(fā)環(huán)境中，我們需要具有強大的、具有實時重新加載(live reloading)或熱模塊替換(hot module replacement)能力的 source map 和 localhost server。而在生產(chǎn)環(huán)境中，我們的目標(biāo)則轉(zhuǎn)向于關(guān)注更小的 bundle，更輕量的 source map，以及更優(yōu)化的資源，以改善加載時間。由于要遵循邏輯分離，我們通常建議為每個環(huán)境編寫彼此獨立的 webpack 配置。通用的配置部分，我們抽象出一個公共文件，通過 webpack-merge 工具的“通用”配置，我們不必在環(huán)境特定的配置中重復(fù)代碼。

ExtractTextWebpackPlugin 插件通常用來做樣式文件的分離，被分離的文件不會被內(nèi)嵌到 JS bundle 中，而會被放到一個多帶帶的文件中，在樣式文件比較大的時候，能夠提前樣式的加載,配置示例如下

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
   module: {
      rules: [
      {
         test: /.css$/,
         use: ExtractTextPlugin.extract({
         fallback: "style-loader",
         use: "css-loader"
      })
   }]
},
    plugins: [
        new ExtractTextPlugin("styles.css"),
    ]
}

它會將所有的入口 chunk(entry chunks)中引用的 *.css，移動到獨立分離的 CSS 文件。因此，你的樣式將不再內(nèi)嵌到 JS bundle 中，而是會放到一個多帶帶的 CSS 文件（即 styles.css）當(dāng)中。 如果你的樣式文件大小較大，這會做更快提前加載，因為 CSS bundle 會跟 JS bundle 并行加載。

如果你有多個 webpack 入口點， 他們都會在生成的HTML文件中的 script 標(biāo)簽內(nèi)。如果你有任何 CSS assets 在 webpack 的輸出中（例如， 利用ExtractTextPlugin提取CSS）， 那么這些將被包含在HTML head中的標(biāo)簽內(nèi)。通常在開發(fā)中，我們?yōu)榱吮苊?CDN 和瀏覽器的緩存通常會個輸出文件 bundle.js 加上一個hash 值例如 [hash].bundle.js，使用 html-webpack-plugin 能夠在創(chuàng)建新的 html 文件的時候?qū)⑽覀儼褞в泄Ｖ档?bundle.js 引用到 html 文件.

用來優(yōu)化從腳本里提煉出來的 css ，配置示例如下

var OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /.optimize.css$/g,
      cssProcessor: require("cssnano"),
      cssProcessorOptions: { discardComments: { removeAll: true } },
      canPrint: true
    })
  ]
};

CopyWebpackPlugin從插件名稱上我們不難看出他的作用，通常用來拷貝資源，對項目文件進行歸類整合

friendly-errors-webpack-plugin能夠更好在終端看到webapck運行的警告和錯誤，提高開發(fā)體驗

UglifyjsWebpackPlugin用來壓縮 js 代碼

webpack 項目服務(wù)，我們通常會在開發(fā)階段用來配置項目的熱刷新，服務(wù)壓縮，項目代理等，常用的幾個配置參數(shù)介紹如下

const config = require("../config")

// config 文件里做了用戶自定的服務(wù)參數(shù)配置

devServer: {
    clientLogLevel: "warning",  // 在開發(fā)攻擊的控制臺中顯示信息，便于開發(fā)調(diào)試，你可以將參數(shù)配置成 "none" 來進行關(guān)閉
     historyApiFallback: { // 當(dāng)使用 HTML5 History API 時，任意的 404 響應(yīng)都可能需要被替代為 index.html
        rewrites: [
           { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, "index.html") },
        ],
     },
     hot: true,   //啟用項目的熱刷新，即模塊熱替換特性
     contentBase: false,   // 告訴服務(wù)器從哪里提供內(nèi)容。只有在你想要提供靜態(tài)文件時才需要。這里禁用，因為配置了 CopyWebpackPlugin 的使用
     compress: true,
     host: HOST || config.dev.host,   //指定使用一個域名。默認(rèn)是 localhost
     port: PORT || config.dev.port,   //指定要監(jiān)聽請求的端口號：
     open: config.dev.autoOpenBrowser, //open 參數(shù)配置，如果配置成 true ，項目啟動后會自動打開瀏覽器
     overlay: config.dev.errorOverlay   //當(dāng)有錯誤或則警告的時候在頁面上顯示一個全屏的遮罩提示
         ? { warnings: false, errors: true }
         : false,
     publicPath: config.dev.assetsPublicPath, //此路徑下的打包文件可在瀏覽器中訪問
     proxy: config.dev.proxyTable,           //代理API的請求
     quiet: true,       //啟用 quiet 后，除了初始啟動信息之外的任何內(nèi)容都不會被打印到控制臺,特別是使用了 FriendlyErrorsPlugin 插件的時候
     watchOptions: {   //與監(jiān)視文件相關(guān)的控制選項。是否使用輪詢
           poll: config.dev.poll,
     }
},

通過了解了上面的配置，我們應(yīng)該對 webpack 的常用插件和工具有了一定了解，我們來看下 vue-cli 腳手架給我們生成的配置情況

"use strict"

const path = require("path") // 引用項目的 path 模塊

module.exports = {
dev: {

// 路徑配置
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {},

// 各種開發(fā)服務(wù)配置
host: "localhost", // 開發(fā)環(huán)境域名 可以被 node 全局變量process.env.HOST 重寫
port: 8080, //配置開發(fā)服務(wù)端口，可以被 node 全局變量 process.env.PORT 重寫, 需要使用未被占用的端口
autoOpenBrowser: false, //服務(wù)啟動是否自動代開瀏覽器
errorOverlay: true,   //是否在發(fā)生錯誤的時候，在頁面整屏增加一個錯誤遮罩
notifyOnErrors: true,  //是否通知錯誤 ，在我們的項目配置中和 friendly-errors-webpack-plugin 結(jié)合使用
poll: false, // 服務(wù)監(jiān)聽是否輪詢操作

// 配飾是否使用 Eslint Loader 進行語法檢測
// 如果使用，在開發(fā)構(gòu)建階段，會對你的代碼會進行檢測
// 檢測出來的警告和錯誤會白展示在開發(fā)工具的控制臺

useEslint: true,  //進行語法檢測

// 配置是否將 eslint 語法檢測的警告和錯誤展示在頁面整屏的遮罩上

showEslintErrorsInOverlay: false,  // 語法檢測的警告和錯誤不展示在遮罩上

/**
 * Source Maps
 */

// https://webpack.js.org/configuration/devtool/#development
// 在上面的介紹中，我們知道 source map 是用來將我們構(gòu)建后被轉(zhuǎn)化的代碼對應(yīng)構(gòu)建前的代碼，便于 debug
// cheap-module-eval-source-map 和我們介紹的 cheap-module-source-map 很類似，但是 SourceMap 會被作為數(shù)據(jù)添加到包中
devtool: "cheap-module-eval-source-map",

// 如果你的開發(fā)工具不能進行 vue-files 的 debug ，可以將以下設(shè)置設(shè)置成 false

cacheBusting: true,

cssSourceMap: true

},

build: {

// index.html 文件模板
index: path.resolve(__dirname, "../dist/index.html"),

// 打包路徑配置
assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: "static",
assetsPublicPath: "/",

/**
 * Source Maps
 */

//生產(chǎn)環(huán)境 source map 配置

productionSourceMap: true,
devtool: "#source-map",

// 因為很多的主流服務(wù)都會 通過 gzip 壓縮過你的所有靜態(tài)資源，我們的配置默認(rèn)不開啟 gzip
// 如果要設(shè)置成開啟,請先確保已經(jīng)安裝好 compression-webpack-plugin 插件
productionGzip: false,
productionGzipExtensions: ["js", "css"],

// 啟動 build 命令的時候，額外添加一個參數(shù)，打包后會自動生成一個分析報告文件，例如 npm run build --report ，可以通過配置 true ，false 來關(guān)閉
bundleAnalyzerReport: process.env.npm_config_report

}
}

這個文件主要是用來檢測當(dāng)前環(huán)境中的node和npm版本和我們需要的是否一致的。

"use strict"
const chalk = require("chalk")  // 改變命令行中的字體顏色，大致這樣用chalk.blue("Hello world")
const semver = require("semver")  //是用來對特定的版本號做判斷的

const packageConfig = require("../package.json")  // 項目 npm 配置文件，獲取依賴及版本信息，requrie返回的就是json對象
const shell = require("shelljs") //用來執(zhí)行Unix系統(tǒng)命令，調(diào)用系統(tǒng)命令更加方便

//把cmd這個參數(shù)傳遞的值轉(zhuǎn)化成前后沒有空格的字符串，也就是版本號
function exec (cmd) {
  return require("child_process").execSync(cmd).toString().trim()
}


const versionRequirements = [
  {
    name: "node",
    currentVersion: semver.clean(process.version),  // 提取進程版本信息轉(zhuǎn)化成規(guī)定格式，也就是 "  =v1.2.3  " -> "1.2.3" 這種功能
    versionRequirement: packageConfig.engines.node // package.json 的 node 的版本信息
  }
]

if (shell.which("npm")) {
  versionRequirements.push({
    name: "npm",
    currentVersion: exec("npm --version"),   //當(dāng)前的版本信息
    versionRequirement: packageConfig.engines.npm //package.json 的 node 的版本信息
  })
}

module.exports = function () {
  const warnings = []

  for (let i = 0; i < versionRequirements.length; i++) {
    const mod = versionRequirements[i]

    // 如果當(dāng)前版本號不符合 package.json 要求的版本號，紅色表示當(dāng)前版本信息，綠色表示要求的版本信息，添加到 warnings 待輸出
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ": " +
        chalk.red(mod.currentVersion) + " should be " +
        chalk.green(mod.versionRequirement)
      )
    }
  }

  //輸出版本號不相符的提示 warnings
  if (warnings.length) {
    console.log("")
    console.log(chalk.yellow("To use this template, you must update following to modules:"))
    console.log()

    for (let i = 0; i < warnings.length; i++) {
      const warning = warnings[i]
      console.log("  " + warning)
    }

    console.log()
    process.exit(1)
  }
}

"use strict"

//打包前判斷當(dāng)先開發(fā)環(huán)境的 node 和 npm 版本和 package.json 要求的時候一樣
require("./check-versions")()

process.env.NODE_ENV = "production"

const ora = require("ora")  // 在用戶打包的時候能夠讓用戶知道正在進行，一個加載中的樣式，轉(zhuǎn)啊轉(zhuǎn)
const rm = require("rimraf") //這個模塊是用來清除之前的打的包，因為在vue-cli中每次打包會生成不同的hash
const path = require("path") //node 路徑模塊，便于我們操作文件路徑
const chalk = require("chalk") //帶顏色的輸出模塊，能在控制臺中輸出不同的樣色
const webpack = require("webpack") //webpack 不解釋
const config = require("../config") // 項目中的配置文件，