vue-cli

在開發前，我們要至少通讀一遍vue官方文檔和API(看官方文檔是最重要的，勝過看五十、一百篇博客),英文閱讀能力還行的建議閱讀英文文檔，中文文檔內容會稍落后，還要通讀相關的vue-router、axios、vuex等。

一般來說我們都是先利用vue-cli來搭建項目基本架構。

正文

首先，我們來說一下安裝的東西吧！處于有頭有尾的目的，還是幾句話草草了事。步驟如下：

安裝vue-cli

npm install vue-cli -g

以webpack模版安裝目錄

vue init webapck webpack-template

這樣之后，我們就可以使用IDE打開目錄了。

此處注明我的vue-cli的版本2.9.2，以免之后改版之后，誤導讀者。

之后，附上自己的目錄截圖，并沒有做改動，如圖：

首先，第一個問題，從何看起呢？當然，是從webpack.base.conf.js開始看起了。這個是dev和prod環境都會去加載的東西。然后，我們可以先從webpack.base.conf.js中會被用到的幾個文件看起。其實，base中被用到了如下的文件，我們可以從代碼中看出：

'use strict'const path = require('path')const utils = require('./utils')const config = require('../config')const vueLoaderConfig = require('./vue-loader.conf')

分別是：

• path 【路徑模塊】
• build目錄中的utils.js文件
• config目錄中的index文件
• build目錄中的vue-loader.conf.js文件

path路徑

這個模塊可以看nodejs官網的介紹，其實，就是一個文件路徑的獲取和設置等模塊，學習node的時候，我們往往會看到這個模塊被大量運用。

path模塊提供了用于處理文件和目錄路徑的使用工具

utils.js

我們可以到其中去看一下代碼，其實光從名字上我們可以推斷出，它可能是為整個腳手架提供方法的。我們可以先來看一下頭部引用的資源文件：

const path = require('path')const config = require('../config')const ExtractTextPlugin = require('extract-text-webpack-plugin')const packageConfig = require('../package.json')

同樣的，它也引用了path模塊和config目錄中的index.js文件，之后的話是一個npm包――extract-text-webpack-plugin。這個包的話，是用來分離css和js的內容的。后續我們可以詳細了解一下。同時，它還引用的package.json文件，這是一個json文件，加載過來之后，會變成一個對象。

所以，我們需要從它的頭部依賴開始說起：

path模塊我們之前提到過，這里就不細說。我們可以來分析一下config目錄下的index.js文件。

index.js

這個文件中，其實有十分充足的代碼注釋，我們也可以來深入探究一下。

從代碼中，我們可以看到通過module.exports導出了一個對象，其中包含兩個設置dev和build。

在dev中，設置了一些配置，代碼如下：

modules.exports = { dev: {  // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {},  // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-  // Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: true, // If true, eslint errors and warnings will also be shown in the error overlay // in the browser. showEslintErrorsInOverlay: false,  /**  * Source Maps  */  // https://webpack.js.org/configuration/devtool/#development devtool: 'eval-source-map',  // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true,  // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false, } }

通過它的注釋，我們可以理解它在dev中配置了靜態路徑、本地服務器配置項、Eslint、Source Maps等參數。如果我們需要在開發中，改動靜態資源文件、服務器端口等設置，可以在這個文件中進行修改。

下面還有一個build的對象，它是在vue本地服務器啟動時，打包的一些配置， 代碼如下：

build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', /** * Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }

其中包括模版文件的修改，打包完目錄之后的一些路徑設置，gzip壓縮等。明白了這些字段的意思之后，就可以在之后的開發中，主動根據項目需求，改動目錄內容。

聊完config下的index.js文件，回到utils.js文件中，我們可以來看幾個其中的方法，來分析它們分別起到了什么作用。

1、assetsPath方法

接受一個_path參數

返回static目錄位置拼接的路徑。

它根據nodejs的proccess.env.NODE_ENV變量，來判斷當前運行的環境。返回不同環境下面的不同static目錄位置拼接給定的_path參數。

2、cssLoaders方法

接受一個options參數，參數還有的屬性：sourceMap、usePostCSS。

同時，這里用到了我們之前提到的extract-text-webpack-plugin插件，來分離出js中的css代碼，然后分別進行打包。同時，它返回一個對象，其中包含了css預編譯器(less、sass、stylus)loader生成方法等。如果你的文檔明確只需要一門css語言，那么可以稍微清楚一些語言，同時可以減少npm包的大小(畢竟這是一個令人煩躁的東西)。

3、styleLoaders方法

接受的options對象和上面的方法一致。該方法只是根據cssLoaders中的方法配置，生成不同loaders。然后將其返回。

4、createNotifierCallback方法

此處調用了一個模塊，可以在GitHub上找到，它是一個原生的操作系統上發送通知的nodeJS模塊。用于返回腳手架錯誤的函數

一共這么四個函數方法，在utils中被定義到。

回看到webpack.base.conf.js文件中，我們可以直接跳過config目錄下的index.js文件，之前已經分析過了。直接來看一下vue-loader.conf.js下的內容。

vue-loader.conf.js

這個文件中的代碼非常的少，我們可以直接貼上代碼，然后來分析，其中的作用。代碼如下：

'use strict'const utils = require('./utils')const config = require('../config')const isProduction = process.env.NODE_ENV === 'production'const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMapmodule.exports = { loaders: utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: isProduction }), cssSourceMap: sourceMapEnabled, cacheBusting: config.dev.cacheBusting, transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' }}

其中，主要就是根據NODE_ENV這個變量，然后分析是否是生產環境，然后將根據不同的環境來加載，不同的環境，來判斷是否開啟了sourceMap的功能。方便之后在cssLoaders中加上sourceMap功能。然后判斷是否設置了cacheBusting屬性，它指的是緩存破壞，特別是進行sourceMap debug時，設置成false是非常有幫助的。最后就是一個轉化請求的內容，video、source、img、image等的屬性進行配置。

具體的還是需要去了解vue-loader這個webpack的loader加載器。

分析了這么多，最終回到webpack.base.conf.js文件中

webpack.base.conf.js

其實的兩個方法，其中一個是來合并path路徑的，另一個是加載Eslint的rules的。

我們直接看后面那個函數，createLintingRule方法：

其中，加載了一個formatter，這個可以在終端中顯示eslint的規則錯誤，方便開發者直接找到相應的位置，然后修改代碼。

之后的一個對象，就是webpack的基礎配置信息。我們可以逐一字段進行分析：

• context => 運行環境的上下文，就是實際的目錄
• entry => 入口文件：src下的main.js文件
• output => 輸出內容，這內部的配置會根據不同的運行環境來進行變化
• resolve => 其中的extensions字段，指定檢測的文件后綴，同時alias是用于指定別名的。在引用文件路徑中，如果有別名的符號，會被替換成指定的路徑。
• module => 配置了一些eslint、vue、js、圖片資源、字體圖標、文件等加載的loader。詳細的可以去看webpack的官方網站。
• node => 此處部分有注釋，主要是阻止一些webpack的默認注入行為，因為在vue中，已經具備了這些功能。

看完這些，你或許對webapck.base.conf.js中的內容有了一些初步的了解。其實，看懂它還需要你了解webpack這個非常有用的打包工具。

之后，我們在來回看webpack.dev.conf.js這個文件

webpack.dev.conf.js

這個文件中，引用了webapck-merge這npm包，它可以將兩個配置對象，進行合并。代碼如下：

const merge = require('webpack-merge');const devWebpackConfig = merge(baseWebpackConfig, { ...}

這樣就合并了base中的webpack配置項。之后，我們可以來看一下dev環境中的新增了那些配置項，它們分別起到了什么作用？

• 首先，在module的rules中增加了cssSourceMap的功能
• 然后就是devtools，通過注釋的英文翻譯，可以知道cheap-module-eval-source-map使得開發更快。
• 之后，就是devSever的一些配置項了。其中包塊客戶端報錯級別、端口、host等等
• 還有新增的plugins，我們可以來看一下實際新增的plugins(具體可以看webpack文檔)：
  定義process.env
  HotModuleReplacementPlugin: 模塊熱替換插件
  NameModulesPlugin: 顯示模塊加載相對路徑插件
  NoEmitOnErrorsPlugin: 在編譯出現錯誤時，使用 NoEmitOnErrorsPlugin 來跳過輸出階段。這樣可以確保輸出資源不會包含錯誤
  HtmlWebpackPlugin: 使用插件生成一個指定的模版。
  

后，還有一個函數，確保啟動程序時，如果端口被占用時，會通過portfinder來發布新的端口，然后輸出運行的host字符串。

webpack.prod.conf.js

這是打包到生產環境中，會被用到的文件。我們可以看到，它相對于之前的webapck.dev.conf.js文件少了一些插件，多了更多的插件。我們也可以和之前一樣，通過它新增的一些東西，來知道它到底干了什么！(此處的新增是相對于webpack.dev.conf.js沒有的內容)

• 新增了output的配置，我們可以看到它在output中新增了一些屬性，將js打包成不同的塊chunk，然后使用hash尾綴進行命名
• 添加了一些插件：
  UglifJsPlugin: 這個是用來丑化js代碼的
  ExtractTextplugin: 這里新增了一些屬性，在打包的css文件也增加了塊和hash尾綴
  OptimizeCssplugin: 這里是來優化css文件的，主要就是壓縮css代碼
  HashedModuleIdsPlugin: 保證module的id值穩定
  optimize: 這里是webpack一系列優化的措施，具體可以逐一查看官方文檔
  CopyWebPlugins: 自定義assets文件目錄
• 如果沒有進行gzip壓縮，調用CompressionWebpackPlugin插件進行壓縮

這樣，我們的webpack配置文件內容基本上就全部看完了?；蛟S，會有點蒙，還是看官方文檔來的實在。

最后，還需要分析一個build.js文件。

build.js

這個文件是在打包的時候，會被用到的。

首先，文件的開頭請求了check-version.js中的函數，然后確定了一下node和npm的版本。相對于較低版本的node和npm，在打包過程中，會產生警告。之后，設置環境參數，設置成生產環境，之后就是一系列打包的流程。

總結

本篇文章，主要總結了一下vue-cli生成的文件中，其中的一些配置參數和文件大致的作用。有不到位的地方，希望大家可以指正。同時希望我們共同進步，共勉。