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

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

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

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

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

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

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

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

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

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

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

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

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"),
    ]
}

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

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

用來(lái)優(yōu)化從腳本里提煉出來(lái)的 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從插件名稱上我們不難看出他的作用，通常用來(lái)拷貝資源，對(duì)項(xiàng)目文件進(jìn)行歸類(lèi)整合

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

UglifyjsWebpackPlugin用來(lái)壓縮 js 代碼

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

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

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

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

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

"use strict"

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

module.exports = {
dev: {

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

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

// 配飾是否使用 Eslint Loader 進(jìn)行語(yǔ)法檢測(cè)
// 如果使用，在開(kāi)發(fā)構(gòu)建階段，會(huì)對(duì)你的代碼會(huì)進(jìn)行檢測(cè)
// 檢測(cè)出來(lái)的警告和錯(cuò)誤會(huì)白展示在開(kāi)發(fā)工具的控制臺(tái)

useEslint: true,  //進(jìn)行語(yǔ)法檢測(cè)

// 配置是否將 eslint 語(yǔ)法檢測(cè)的警告和錯(cuò)誤展示在頁(yè)面整屏的遮罩上

showEslintErrorsInOverlay: false,  // 語(yǔ)法檢測(cè)的警告和錯(cuò)誤不展示在遮罩上

/**
 * Source Maps
 */

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

// 如果你的開(kāi)發(fā)工具不能進(jìn)行 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",

// 因?yàn)楹芏嗟闹髁鞣?wù)都會(huì) 通過(guò) gzip 壓縮過(guò)你的所有靜態(tài)資源，我們的配置默認(rèn)不開(kāi)啟 gzip
// 如果要設(shè)置成開(kāi)啟,請(qǐng)先確保已經(jīng)安裝好 compression-webpack-plugin 插件
productionGzip: false,
productionGzipExtensions: ["js", "css"],

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

}
}

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

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

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

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


const versionRequirements = [
  {
    name: "node",
    currentVersion: semver.clean(process.version),  // 提取進(jìn)程版本信息轉(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)前版本號(hào)不符合 package.json 要求的版本號(hào)，紅色表示當(dāng)前版本信息，綠色表示要求的版本信息，添加到 warnings 待輸出
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ": " +
        chalk.red(mod.currentVersion) + " should be " +
        chalk.green(mod.versionRequirement)
      )
    }
  }

  //輸出版本號(hào)不相符的提示 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)先開(kāi)發(fā)環(huán)境的 node 和 npm 版本和 package.json 要求的時(shí)候一樣
require("./check-versions")()

process.env.NODE_ENV = "production"

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