學習 webpack 前，你須要瞭解的那些概念

wepback做爲前端最熱門的打包管理工具之一，學習一下是頗有必要的，關於webpack的學習教程不少，而且官方也有對應的中文文檔，因此本篇文章再也不講解如何使用webpack，而是重點講解學習webpack前須要瞭解的一些概念。

什麼是webpack

關於什麼是webpack，通常的教程裏面都會提到webpack是一個模塊化打包工做，可是不少初學者沒有模塊化這個概念，因此每每在第一步就被攔住了。因此在講什麼是webpack以前，我想先講一下和模塊化相關的概念。

javascript的運行環境

由於咱們平時寫的js代碼都在瀏覽器中運行，因此可能會形成一個錯覺，那就是js代碼只能在瀏覽器中運行，其實瀏覽器只是js的一個運行環境，除了在瀏覽器，還能夠在服務器上運行，也就是node環境，感興趣的能夠本身下載node.js試一下，在node.js裏面能夠直接運行js代碼。因此有些語法在瀏覽器裏面並不支持，好比es6的module，即便在最新的瀏覽器裏面也不行，這些語法只能在node環境中運行，直接在瀏覽器中使用會報錯。

什麼是模塊化？

在講模塊化以前，咱們先複習一下less，咱們在a.less文件中定義了一個顏色變量@white:#fff，如今我在b.less中想用到這個@white變量應該怎麼辦呢？使用@import 'a'就能夠了。在上面那段less代碼中，其實咱們就用到了模塊化編程，只不過是基於less的。如今咱們再來看一下js如何實現模塊化編程。

傳統的寫法比較簡單，就是把本身須要的js文件所有放到index,html中引入，在引入的時候還須要確保引入的順序是正常的，本質上來講，就是把全部代碼所有引入到一個js文件中。而如今咱們採用模塊化的寫法，就會相對來講結構清晰一點，好比在main.js裏面須要使用jquery，那麼咱們能夠在main.js裏面這麼寫：import $ from "jquery"，在index.html裏面只須要引入main.js便可，採用這種寫法可讓文件間的依賴關係更加清楚，實現按需加載，同時結構也會更加合理。

JS的模塊規範有哪些

在es6以前，主要採用AMD和CMD這2中規範，AMD規範比較好的一個實現庫是require.js，CMD對應的是seajs,還有一點node.js也是符合CMD規範的，因此cmd規範的代碼能夠直接在node環境下運行。而js的最新版本es6則提供了原生的module語法，以實現對模塊化的支持

CMD語法：

// 定義模塊

module.exports =function(){

vargreet =document.createElement('div');

greet.textContent ="Hi there and greetings!";returngreet;};

//引用模塊

letgreeter =require('./Greeter.js');複製代碼

ES6語法：

//定義模塊

etdog="我愛哈士奇"

exportdefaultdog

//引用模塊

importdogfrom'animal'複製代碼

webpack幹了什麼

上面已經提到這些模塊化的語法是不能在瀏覽器環境中運行的，因此咱們須要這些將這些互相依賴的文件進行編譯（打包），編譯成瀏覽器可以運行的代碼。而webpack作的就是這個打包操做，好比咱們在main.js裏面依賴了add.js文件，而add.js文件使用import $ form 'jquery',那麼webpack會發現main.js須要add.js，而後將add.js導入，導入add.js的時候發現add.js須要jquery，而後又將jquery給導入，最後生成了一個總的js文件，這樣咱們的代碼就能夠到瀏覽器環境上運行了。

webpack與es6

es6提供了不少激動人心的新特性，可是這些新特性並不被全部的瀏覽器支持，爲了使用這些新特性，咱們可使用babel插件，將咱們的代碼es6代碼轉換成es5代碼。可是對於一些es6新的api，好比promise等，須要使用babel-polyfill，而如何使用babel-polyfill呢？只要在須要對es6轉換成es5的文件頭部加上import 'babel-polyfill';很明顯，這是es6的模塊語法，表示這個文件依賴babel-profill這個文件，因此咱們須要使用打包工具來進行打包，這樣才能運行這段代碼。因此，想要學習es6，webpack是必需要邁過去的一道坎。

如何學習webpack

談了這麼多，總算要到如何學習了。學習資料的話，能夠去看一些已經整理好的資料或者官網的文檔，瞭解config的基本語法就能夠開始擼了。這裏推薦一個練手的項目：多動症簡歷。這是一個頗有意思的項目，裏面用到了es6+promise+webpack,若是你能將這段代碼進行打包，並實現如下幾個要求，那麼你webpack能夠說是入門了。若是你對這個多動症簡歷項目感興趣，能夠去看一下項目做者的這篇文章：用原生js寫一個"多動症"的簡歷,推薦直接閱讀項目的源代碼，從中能夠學到不少知識。

• 使用babel-loader將es6轉換成es5
• 將css單獨的打包成一個文件
• 壓縮js代碼
• 壓縮css代碼
• 使用html模板生成index.html
  至於上面這些功能如何實現，須要用到哪些插件，但願你能本身去百度，去google，去stackoverflow。只有本身練過，纔算完全掌握，若是隻是簡單的跟着官網項目作幾個簡單的demo,其實沒什麼意義。

踩坑記錄

這是我在使用webpack時遇到的一些坑，webpack的版本號是3.0，若是你也遇到了，能夠參考一下下面的解決方案。
使用extract-text-webpack-plugin生成單獨的css時，可能會報錯chunk.sortModules is not a function ，解決方案是回退extract-text-webpack-plugin版本號到2.1.2，npm i extract-text-webpack-plugin@2.1.2。
通常的壓縮js插件沒法壓縮es6，若是想對es6代碼進行壓縮，可使用UglifyjsWebpackPlugin。可是若是教程一步一步來仍是會報錯Unexpected token: name (doc)。解決方案是將babel配置拿出來，不要放在webpack.config中，單獨的放到.babelrc中。
使用了extract-text-webpack-plugin後沒法進行css壓縮？
可使用optimize-css-assets-webpack-plugin這一插件來解決。

webpack和gulp有什麼區別

二者雖然在某些功能上相似，好比均可以壓縮代碼，編譯less等。可是二者的定位不一樣，剛纔也提到過了，webpack本質上是一個打包工具，支持CMD的語法，將多個互相依賴的js文件打包成一個js文件。而gulp則是一個自動化工具，用來處理less編譯，代碼壓縮這些，gulp的核心概念是管道，全部文件在管道中流通，而後在流的過程當中依次進行代碼壓縮，less編譯等操做，最後再將這些文件流輸出到指定目錄。因此二者在功能以及定位上都有很大的不一樣。