引子

在研究完前面的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 [email protected] -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都不需要了

補充：expore拋出命令

可以拋出一個變量，也可以拋出一個對象，還是拋出一個函數

獲取：

補充：各類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，這個參數就可以解決每次改完代碼之後都要手動編譯一次的問題

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

比如我現在的頁面是：

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

這邊的終端自己在重新編譯，以下並不是我手動配置的：

打開網頁：

完美

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