一、webpack

在這裏我僅僅的是對webpack做個講解，webpack這個工具非常強大，解決了我們前端很繁瑣的一些工具流程繁瑣的事情。如果感興趣的同學，建議還是看官網吧。

中文鏈接地址：https://www.webpackjs.com/

為什麽要使用webpack？

現今的很多網頁其實可以看做是功能豐富的應用，它們擁有著復雜的JavaScript代碼和一大堆依賴包。為了簡化開發的復雜度，前端社區湧現出了很多好的實踐方法

• 模塊化，讓我們可以把復雜的程序細化為小的文件;
• 類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之後還能轉換為JavaScript文件使瀏覽器可以識別；
• Scss，less等CSS預處理器
• ...

這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現提供了需求。

什麽是webpack

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。

官網的一張圖，你是否能看明白呢？

中間那個是webpack的圖標，可以看作webpack這個工具。左邊是我們項目生產環境下所以來的包，通過這個webpack工具我們可以打包所有的圖片，所以的腳本，所有的樣式等等，最後打包成了右邊的靜態資源文件。

註意了：每個webpack的版本都有不同的功能，而且高版本的webpack可能會出現意想不到的bug，在這裏推薦大家使用2版本的webpack。

另外webpack還支持我們的模塊化加載。在之前的學習可沒有這個功能哦！這讓我們更加快速的開發。

二、babel

http://babeljs.io/

這個是解析我們es6的代碼的，為什麽要用它呢，因為對於一些ie瀏覽器，甚至FF瀏覽器，低版本的還不能識別我們的es6代碼，那麽vue裏面好多還讓我們去寫es6的代碼，這個時候我們就可以用babel這個工具將我們的es6的代碼轉譯成瀏覽器能識別的代碼

左邊是我們寫的es6代碼，右邊是通過babel這個工具編譯之後的代碼。這個代碼能在我們各個瀏覽器中去識別。

所以我們稱為babel，是用於編寫下一代JavaScript的編譯器。

模塊化

在前端中一個js文件就是一個模塊，在js中沒有模塊化的概念。

目前有四種模塊化的方法

1.Commonjs

2.AMD

3.CMD

4.ES6Module

es6Module 支持import和export。跟python的import很像。但它必須在服務器環境下才支持，或者我們可能通過webpack的babel-loader將es6支持轉化成es6的語言。

在這裏就不給大家演示，大家了解一下即可。後面咱們使用vue開啟項目之後，一使用，自然而然就明白了。

vue - webpack、babel