vue（7）—— 組件化開發 — webpack（1）

引子

 

在研究完前面的vue開發後，其實已經能夠本身開發點東西了，靠前面的指令集，組件，還有vue-router，還有異步請求這些知識點，是徹底能夠開發出來的，徹底能夠達到時下先後端分離的效果。

 

可是，你在開發的過程中，可能會遇到不少問題，而你只能用很低端的手段來解決問題，也可能在開發中，會遇到大量重複代碼，並且尚未個很好的解決辦法，而且在之後實際開發中，並不會像前面那樣，一個html頁面就搞定全部了，絕對不會的，確定會有不少個文件，各類庫，各類包之類的，這裏倒過來，那裏倒過去，哪一個放前面，哪一個放後面也有講究的，否則的話就會報錯。好的，仍是上個例子，看起來更有說服力一點，好比，我這裏要開發一個單頁面應用：

 

項目結構以下：

 

dist是自定義目錄，裏面寫好了不一樣的vue項目

app.js:

 

code1.js:

 

 

code2.js:

 

 

index.html:

 

 

展現結果：

 

好像並無什麼問題，可是，假如說，咱們寫的js不少呢？你難道一個一個都要去導入嗎：

 

 這樣其餘的先不說，首先給用戶的體驗就很差，你那麼多文件，所有都要同時加載資源並打開，這是很耗資源的，若是網絡不太好加載很慢怎麼辦？

 

項目解耦

 

因此，就出現了導包，把整個項目解耦，低耦合的形式，這也是全部程序開發界都承認的方法，這個在後端開發部分很是常見。而這裏前端其實也有的，那麼如今這個怎麼導包呢？

做以下改動：

 

code1.js:

 

code2.js:

 

其中export default的意思指拋出一個變量，若是隻有一個變量則必須帶上default否則報錯，當其餘的庫導入該組件則可使用這個拋出的變量。相似於return語法

 

app.js以下，在app.js裏導入Cont和Footer包，注意格式   import  XX from '文件路徑'，而後定義vue實例，由於這個算是咱們項目的入口函數了，這裏若是再使用expore 拋出變量的話，在html文件裏沒法接受到

 

 

 index.html做以下改動：

 

 

加載網頁，實際上是能夠了，可是報錯了，提示的意思是不能識別這種導包的語法，就是由於這個語法不能識別的問題，因此致使咱們的項目沒法走下去

 

 

 

 

要解決這個問題，這就須要下面的工具，webpack了

 

 

模塊化規範

 

在說webpack以前，先了解下以下東西： 

 

由於前端也有模塊的概念，也有導包引包，因此但因爲沒有個模塊化規範，因此在導包時前端開發者都很在乎導包的順序，否則的話就很容易出錯，到後面，慢慢有了模塊化規範，以下： 

• Commonjs的規範是偏向服務端的，且是同步加載模塊，是js在後端語言的規範
• AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出
• CMD 是 SeaJS（淘寶的玉伯開發）在推廣過程當中對模塊定義的規範化產出，是異步加載模塊
• UMD通用模塊定義，一種既能兼容amd也能兼容commonjs也能兼容瀏覽器環境運行的萬能代碼

 

也就是說以上的只是模塊化開發的規範，不一樣的規範，則有不一樣的導包方式，最主流的仍是 

 

有了模塊化規範，則有包管理器： 

 

• npm是能夠下載先後端的js代碼475000個包
• bower只能下載前端的js代碼,bower在下載bootstrap的時候會自動的下載jquery
• browserify 解決讓require能夠運行在瀏覽器，分析require的關係，組裝代碼。

 

 npm/bower集中包管理的方式備受青睞，2012年browserify/webpack也隨之誕生

 

模塊打包器（module bundle）

 

目前有grant，gulp，webpack

到如今，目前webpack成了打包工具界的市場主流

 

總之，以上都是歷史發展演變過程，不須要太注意，你就記住目前主流的模塊化開發用的打包器就是webpak就好了，而後導包方式是用的  import   xx from './XX.js'（這就是es6的導包） 

 

webpack

 

什麼是webpack

 

官方解釋：webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。什麼意思呢？就是能夠把你開發項目時用到的全部資源所有打包成一個js文件，而後項目在上線階段引入這個js文件就好了，它會自動幫你展出你最開始用到的資源

感受有點編譯的意思對吧

 

webpack做用

 

官網的圖，直接簡單明瞭：傳送門 

 

 

第一個做用：整合包

第二個做用：提升兼容性，由於如今的前端界，每一年出的新的技術，新的東西太多了，不說其餘的，就VUE的東西就挺多了，並且更新又快，不少人是真的學不過來的，我就是這樣，以爲好多東西都要學啊，每一個技術的特性基本都不同，有哪些共同點，哪些不一樣，都要分清楚，而且在使用中，不一樣的技術放在一塊兒，還會致使一些衝突之類的，加上如今的瀏覽器又不是很支持這些新技術，好比ECMAscript6的不少語法，瀏覽器都不支持的。那麼有了webpack就能夠把兼容性提升，讓原本不太支持的變成支持

 

webpack特性

 

webpack是力求把全部的東西模塊化，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 打包器。

詳細的就看官方文檔：傳送門

 

安裝webpack

 

一樣的仍是用npm安裝，這裏要注意下，爲了要和後面的vue-cli腳手架配合，因此安裝webpack須要安裝指定的版本，由於webpack最新版對vue-cli不太支持。

這裏是一個前端大牛跟我說的，安裝3.12.0版本：npm  i webpack@3.12.0 -g

 

 

真實體會webpack 

 

估計看完上面的，可能仍是對webpack不是很瞭解，那麼，再看上面的例子：

 

前提還要再安裝一次webpack到本地，使用這個命令以後，根目錄的那個package.json纔會自動爲咱們配置一些信息

 

 

而後終端進入項目目錄，使用命令  webpack  xx（入口js文件）  xx（入口js文件），以下：，入口文件路徑必須正確，否則報錯：

 

 

此時這個bundle.js文件就是已經編譯好的js文件，而且能夠被瀏覽器識別的文件了，你能夠打開看看，但不要改裏面的東西，裏面一大堆，能夠體驗一下，看不懂很正常

 

 

 

 而後再在html文件裏做以下修改，直接使用編譯好的文件

 

瀏覽器打開測試，完美顯示：

 

 

 

這個時候，你只須要把index.html文件和bundle.js文件單獨拿出來，再把一些必要庫帶上，而後一塊兒放到你的服務器上就能夠解析訪問了，其餘咱們用到的app.js和code1.js，code2.js都不須要了

 

這裏能夠測試一下，我把index.html和bundle.js文件移到了桌面，由於用到了vue.js，因此把vue.js也拿出來：

 

改一下vue.js的引入路徑：

 

雙擊打開index.html，確實可行，這全靠webpack生成的bundle.js文件

  

補充：expore拋出命令

 

能夠拋出一個變量，也能夠拋出一個對象，仍是拋出一個函數

 

另外一邊導入獲取：

 

獲取時能夠 用 as 取別名。    這個若是你是以前有開發基礎的很好理解，不少開發語言裏都有這種as取別名的

 

 

補充：各種npm安裝命令：

• npm install module_name -S    即    npm install module_name --save    寫入dependencies
• npm install module_name -D    即    npm install module_name --save-dev 寫入devDependencies
• npm install module_name -g 全局安裝(命令行使用)
• npm install module_name (不帶任何參數)本地安裝(將安裝包放在 ./node_modules 下)
• npm install --production 只安裝dependencies而不安裝devDependencies

 

devDependencies指裏面的全部庫，插件只用於開發環境，不用於生產環境，開發環境就是目前咱們正在搞的階段所使用的環境

dependencies 指須要發佈到生產環境的庫，插件，也就是指項目裏面的代碼已經開發完成能夠直接發佈到服務器上的

 

這兩個在哪裏見過呢？在package.json裏面就有：

 

 

 

疑問

 

這裏可能有朋友可能有疑惑，這裏再本地又裝了一次webpack，前面不是已經裝了個webpack在全局嗎，爲何這裏還要再安裝一次呢，此時相信你看了上面的npm install安裝命令時，就已經有個大概瞭解了，可是仍是有疑惑的話，你能夠試試在沒有安裝在本地的狀況下能不能運行下面要用的，好的，我這裏把webpack卸載了，再看看：

 

卸載要注意，你安裝時用的什麼命令安裝，就得用什麼命令卸載，好比我這裏以前用的-D，那麼卸載也得-D，由於前面說了，在使用-D安裝到項目目錄時，會自動寫入一些參數在咱們項目的配置文件裏，卸載的話就會刪除那些參數

 

 

 

 卸載以後，好的，如今再用編譯命令看看：

 

 

 

好像沒什麼問題吧。可是接下來的操做可能就很差說了。我建議仍是在本地裝上好些，由於前端開發界的大神們的習慣中，都有將包安裝了全局又安裝一次在當前項目的，由於同一個包有不一樣版本啊，也就會有不一樣的操做了

 

簡寫命令運行項目

 

簡化webpack編譯命令：

若是你以爲在使用webpack編譯時，每次須要輸入入口文件和輸出文件，有點麻煩的話，你能夠作以下改動：

首先，須要在根目錄建立一個webpack的配置文件，webpack.config.js，而後寫入如下：

 

 

代碼：

module.exports = {
    entry: { //入口
        name: './dist/app.js'  //鍵名隨意，值爲項目入口js
    },
    output: { //出口
        filename: './bundle.js' //鍵名必須爲filename，值爲項目編譯好的js
    }
}

 

 

這個webpack的配置文件名webpack.config.js固定的，不能隨意改動

 

如今再執行命令，只需執行webpack便可：

 

 

若是那個輸出文件的鍵不爲filename，就會報錯：

 

映射webpack命令

 

有了以上配置以後，在之後的開發中，可能有朋友並不喜歡用webpack命令或者並不知道有webpack命令，只知道npm命令，那麼這裏就能夠作一個命令映射：

 

修改package.json文件，由這樣的：

 

改爲這樣的：

 

而後使用 npm run start便可，發現運行npm  run start時會自動解析到webpack命令

 

完美解決。可是你可能發現此時沒什麼鳥用，是的，目前沒什麼鳥用，看完下面你就知道有沒有鳥用了

 

生產環境開發環境

 

第一個問題：在前面相信你已經發現了，咱們每次對代碼作了調整都要從新運行一下命令編譯代碼（webpack  XX  XX），這樣重複的操做太不是咱們開發者的風格了，這是

第二個問題：開發環境問題，在之後的開發中，當咱們以爲開發完成時，準備對項目最最後的測試時，有不少配置，不少第三方的庫實際上是開發環境須要而生產環境不須要的，而後咱們在開發完成以後須要作稍微的調整，才能夠把最後的能夠放在服務器上的代碼抽離出來

 

因此以上的兩個問題，能夠一併解決

 

 

咱們徹底能夠建立兩個環境，一個開發環境，正是目前咱們使用的，一個生產環境，即最後的測試，測試以後則拿到生產環境上使用的，這種怎麼處理呢，仍是改配置文件：

 

1.附加兩個webpack的配置文件，一個是webpack.dev.config.js，這個就是咱們的開發環境，一個是webpack.prod.config.js，這個就是咱們的生產環境：

 

 

2.配置package.json文件：

 

 

 

"scripts": {
    "dev": "webpack --config  ./webpack.dev.config.js",
    "build": "webpack --config  ./webpack.prod.config.js"
  },

 

3.最後給webpack.dev.config.js一個監聽參數：watch:true，這個參數就能夠解決每次改完代碼以後都要手動編譯一次的問題

 

 

而且webpack.prod.config.js不用改，不用加watch參數，由於webpack.prod.config.js是上線測試用的，因此不須要watch監聽了 

 

 運行npm run dev，此時程序卡在這裏了，這樣就作到了實時監聽，當數據一發生改變立馬自動從新編譯

 

 

 

好比我如今的頁面是：

 

我改了code2.js裏的數據以下：

 

 這邊的終端本身在從新編譯，如下並非我手動配置的：

 

 

 

 打開網頁：

 

 

完美。

而後你就能夠專心的開發你的項目了，最後測試完畢後，再使用npm run build作最後測試，經過則直接能夠把代碼放到服務器上運行了