學習 webpack 前，你需要了解的那些概念

Sadness發表於2019-03-03
Web

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編譯等操作，最後再將這些檔案流輸出到指定目錄。所以兩者在功能以及定位上都有很大的不同。

相關文章