vue-cli解析
前言
這段時間,算是空出手來寫幾篇文章了。由於很久都沒有時間整理現在所用的東西了,所以,接下來會慢慢整理出一些文檔來記錄前段時間的工作和生活。
這篇文章的主題是vue-cli的理解。或許,很多人在開發vue的時候,我們會發現一個問題——只會去用,而不明白它的裏面的東西。現在的框架可以說是足夠的優秀,讓開發者不用為搭建開發環境而煩惱。但是有時候,我們還是得回到原始生活體驗一下,才能夠讓自己更上層樓,希望大家共勉。如果你喜歡我的文章,歡迎評論,歡迎Star~。歡迎關註我的github博客
正文
首先,我們來說一下安裝的東西吧!處於有頭有尾的目的,還是幾句話草草了事。步驟如下:
- 安裝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文件中,我們可以來看幾個其中的方法,來分析它們分別起到了什麽作用。
- assetsPath方法
接受一個_path參數
返回static目錄位置拼接的路徑。
它根據nodejs的proccess.env.NODE_ENV變量,來判斷當前運行的環境。返回不同環境下面的不同static目錄位置拼接給定的_path參數。
- cssLoaders方法
接受一個options參數,參數還有的屬性:sourceMap、usePostCSS。
同時,這裏用到了我們之前提到的extract-text-webpack-plugin插件,來分離出js中的css代碼,然後分別進行打包。同時,它返回一個對象,其中包含了css預編譯器(less、sass、stylus)loader生成方法等。如果你的文檔明確只需要一門css語言,那麽可以稍微清楚一些語言,同時可以減少npm包的大小(畢竟這是一個令人煩躁的東西)。
- styleLoaders方法
接受的options對象和上面的方法一致。該方法只是根據cssLoaders中的方法配置,生成不同loaders。然後將其返回。
- 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.cssSourceMap
module.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配置文件內容基本上就全部看完了。或許,會有點蒙,還是看官方文檔來的實在。
最後,還需要分析一個build.js文件。
build.js
這個文件是在打包的時候,會被用到的。
首先,文件的開頭請求了check-version.js中的函數,然後確定了一下node和npm的版本。相對於較低版本的node和npm,在打包過程中,會產生警告。之後,設置環境參數,設置成生產環境,之後就是一系列打包的流程。
總結
本篇文章,主要總結了一下vue-cli生成的文件中,其中的一些配置參數和文件大致的作用。有不到位的地方,希望大家可以指正。同時希望我們共同進步,共勉。
如果你對我寫的有疑問,可以評論,如我寫的有錯誤,歡迎指正。你喜歡我的博客,請給我關註Star~呦github博客
原文地址:https://segmentfault.com/a/1190000012581869
vue-cli解析