上一篇文章，我們在window上搭建了vue的開發(fā)環(huán)境，windows下搭建vue開發(fā)環(huán)境，并且創(chuàng)建了項目，我們看到了vue項目的目錄結(jié)構(gòu)。工欲善其事，必先利其器，在創(chuàng)建項目的過程中，我們使用了webpack和eslint工具，這一節(jié)我們就來講講這兩個工具。
一、Webpack
1.Webpack是什么
Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
webpack打包流程
2.Webpack 的特點
1）代碼拆分
Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點，形成一個新的塊。在優(yōu)化了依賴樹后，每一個異步區(qū)塊都作為一個文件被打包。
2）Loader
Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。
3）智能解析
Webpack 有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時候，允許使用動態(tài)表達(dá)式
require("./templates/" + name + ".jade")
4）插件系統(tǒng)
Webpack 還有一個功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個插件系統(tǒng)運行的，還可以開發(fā)和使用開源的 Webpack 插件，來滿足各式各樣的需求。
5）快速運行
Webpack 使用異步 I/O 和多級緩存提高運行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。
更加細(xì)致的解讀，請大家參考http://webpackdoc.com/。
3.Vue項目中的Webpack舉例
Webpack 在執(zhí)行的時候可以通過指定的配置文件來執(zhí)行。默認(rèn)情況下，會搜索當(dāng)前目錄的
webpack.config.js
在我們上一節(jié)新建的vue工程目錄下：
我們可以看到webpack.base.conf.js文件，這個文件就是我們使用vue init的模板創(chuàng)建的webpack配置文件。在package.json里，已經(jīng)添加了webpack的依賴。
打開webpack.base.conf.js:
通過指定entry，webpack可以知道我們的工程是從哪里開始啟動的，非常方便快捷。
entry: {
app: './src/main.js'
}
二、Eslint
1.Eslint是什么
在團(tuán)隊協(xié)作中，我們經(jīng)常會要求團(tuán)隊成員統(tǒng)一代碼的風(fēng)格，會預(yù)先制定編碼規(guī)范，幫助大家規(guī)范自己的代碼，方便后續(xù)的維護(hù)。使用 Lint 工具和代碼風(fēng)格檢測工具，則可以輔助編碼規(guī)范執(zhí)行，有效控制代碼質(zhì)量。
ESLint是一個QA工具，就是用來避免低級錯誤和統(tǒng)一代碼的風(fēng)格。它由Nicholas C. Zakas 編寫， 2013 年發(fā)布第一個版本。
2.Eslint的特點
ESLint 主要有以下特點：
默認(rèn)規(guī)則包含所有 JSLint、JSHint 中存在的規(guī)則，易遷移；
規(guī)則可配置性高：可設(shè)置「警告」、「錯誤」兩個 error 等級，或者直接禁用；
包含代碼風(fēng)格檢測的規(guī)則（可以丟掉 JSCS 了）；
支持插件擴展、自定義規(guī)則。
3.Eslint的配置方式
可以通過以下三種方式配置 ESLint:
1）使用 .eslintrc文件（支持 JSON 和 YAML 兩種語法）；
2）在 package.json中添加 eslintConfig 配置塊；
3）直接在代碼文件中定義。
4.Vue項目中的Eslint舉例
在我們的vue項目中，我們使用第一種方式，在初始化工程的時候默認(rèn)開啟了Eslint，在.eslintrc文件中配置Eslint。
'arrow-parens': 0，表示的是箭頭函數(shù)用小括號括起來；
'generator-star-spacing': 0,表示生成器函數(shù)的前后空格
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0，表示開發(fā)環(huán)境下使用debugger。
其他規(guī)則遵照標(biāo)準(zhǔn)的Eslint規(guī)則。
接下來我們看一下工程中的一行代碼：
這是我在完整的項目中寫的一段js代碼，function后面沒有空格，這時，保存修改，項目自動編譯報錯：
原因在于按照Eslint默認(rèn)的規(guī)則，需要在function后面空格在加括號，修改之后即可編譯通過。這種方式對于培養(yǎng)我們寫代碼的規(guī)范是非常有幫助的，希望大家從開始就能養(yǎng)成習(xí)慣。
以上就是這一節(jié)的全部內(nèi)容，下一節(jié)，我們正是進(jìn)入vue的實戰(zhàn)環(huán)節(jié)。
** 如果您喜歡我們的文章，點贊就好，您的認(rèn)可是我分享的最大動力*
