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

關於什麼是webpack，一般的教程裡面都會提到webpack是乙個模組化打包工作，但是很多初學者沒有模組化這個概念，所以往往在第一步就被攔住了。所以在講什麼是webpack之前，我想先講一下和模組化相關的概念。

在講模組化之前，我們先複習一下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即可，採用這種寫法可以讓檔案間的依賴關係更加清楚，實現按需載入，同時結構也會更加合理。

在es6之前，主要採用amd和cmd這2中規範，amd規範比較好的乙個實現庫是require.js，cmd對應的是seajs,還有一點node.js也是符合cmd規範的，所以cmd規範的**可以直接在node環境下執行。而js的最新版本es6則提供了原生的module語法，以實現對模組化的支援

cmd語法：

// 定義模組
module.exports =function();
//引用模組
letgreeter =require('./greeter.js');

es6語法：

//定義模組 etdog="我愛哈士奇" exportdefaultdog //引用模組

importdogfrom'animal'

上面已經提到這些模組化的語法是不能在瀏覽器環境中執行的，所以我們需要這些將這些互相依賴的檔案進行編譯（打包），編譯成瀏覽器能夠執行的**。而webpack做的就是這個打包操作，比如我們在main.js裡面依賴了add.js檔案，而add.js檔案使用import $ form 'jquery',那麼webpack會發現main.js需要add.js，然後將add.js匯入，匯入add.js的時候發現add.js需要jquery，然後又將jquery給匯入，最後生成了乙個總的js檔案，這樣我們的**就可以到瀏覽器環境上執行了。

es6提供了很多激動人心的新特性，但是這些新特性並不被所有的瀏覽器支援，為了使用這些新特性，我們可以使用babel外掛程式，將我們的**es6**轉換成es5**。但是對於一些es6新的api，比如promise等，需要使用babel-polyfill，而如何使用babel-polyfill呢？只要在需要對es6轉換成es5的檔案頭部加上import 'babel-polyfill';很明顯，這是es6的模組語法，表示這個檔案依賴babel-profill這個檔案，所以我們需要使用打包工具來進行打包，這樣才能執行這段**。所以，想要學習es6，webpack是必須要邁過去的一道坎。

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

這是我在使用webpack時遇到的一些坑，webpack的版本號是3.0，如果你也遇到了，可以參考一下下面的解決方案。

使用extract-text-webpack-plugin生成單獨的css時，可能會報錯chunk.sortmodules is not a function，解決方案是回退extract-text-webpack-plugin版本號到2.1.2，npm i [email protected]。

一般的壓縮js外掛程式無法壓縮es6，如果想對es6**進行壓縮，可以使用uglifyjswebpackplugin。但是如果教程一步一步來還是會報錯unexpected token: name (doc)。解決方案是將babel配置拿出來，不要放在webpack.config中，單獨的放到.babelrc中。

使用了extract-text-webpack-plugin後無法進行css壓縮？

可以使用optimize-css-assets-webpack-plugin這一外掛程式來解決。

兩者雖然在某些功能上類似，比如都可以壓縮**，編譯less等。但是兩者的定位不同，剛才也提到過了，webpack本質上是乙個打包工具，支援cmd的語法，將多個互相依賴的js檔案打包成乙個js檔案。而gulp則是乙個自動化工具，用來處理less編譯，**壓縮這些，gulp的核心概念是管道，所有檔案在管道中流通，然後在流的過程中依次進行**壓縮，less編譯等操作，最後再將這些檔案流輸出到指定目錄。所以兩者在功能以及定位上都有很大的不同。

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

Fiddler 你需要了解的

入門大疆 SDK 開發前，你需要了解這些

關於「寫作」你需要了解的

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

Fiddler 你需要了解的

入門大疆 SDK 開發前，你需要了解這些

關於「寫作」你需要了解的

相關推薦