前言

如果你已經(jīng)對Webpack精通了或者至少一直在工作中使用它，請關閉當前瀏覽器標簽，無視這篇文章。

這篇文章本意是寫給我自己看的，作為一篇Cookbook供快速查詢和上手用。原因是雖然工作中會涉及到React開發(fā)，但并不是持續(xù)性的。可能兩個功能的迭代相隔幾周甚至一個月。期間則是使用其他的工具或者框架進行開發(fā)。而每次撿起來重新開發(fā)時或者立新項時，發(fā)現(xiàn)已經(jīng)不太會寫webpack配置了，又需要重新查詢各種教程。后來反思其實是因為從來就沒有真的學懂過webpack。這篇文章就是我在重新徹底學習完webpack之后的總結文章。也為了方便自己今后查詢用。

什么是 Webpack

webpack 是一個打包工具，為什么需要打包？因為有的人的腳本開發(fā)語言可能是 CoffeeScript 或者是 TypeScript，樣式開發(fā)工具可能是 Less 或者 Sass，這都需要工具把它們“編譯”成瀏覽器能識別 Javascript 和 CSS。webpack就是干這個的。

現(xiàn)在你可能會問為什么我要用它？Grunt和Gulp不是也能做相同的事情嗎？我也是這么認為的。Grunt和Gulp定位為任務/流程工具（Grunt的副標題為The JavaScript Task Runner），除了打包工作外，它們還能執(zhí)行圖片壓縮，文檔生成（雖然這其中的很多webpack也已經(jīng)能做了），代碼檢查等等，你可以自己自由選擇要執(zhí)行的任務然后把它們一環(huán)連一環(huán)的拼接在一起。理論上來說，webpack是Grunt的功能子集。

然后為什么我要用webpack？好吧，這個問題你也可以用在為什么已經(jīng)有Grunt了還要造一個Gulp？以及為什么我要用Gulp替代Grunt，它們倆功能不也類似嗎？客套點的答案是，存在的即是合理的，它們的出現(xiàn)必然有可取之處；殘酷一點的答案是webpack是當下最流行最前沿的，是作為前端工程師先進性的表現(xiàn)，所以你必須要學。就和使用gmail比使用qq郵箱求職更讓人看得起一樣，其實沒什么道理。什么？你說你不想學，不會也就不會了？這話別對我說，對你將來的面試官說

Webpack 誤區(qū)

我接觸 Webpack 是從學習React開始，所以一直有個誤區(qū)：Webpack，React，Babel是深度綁定的。其實不是。如果你不是在進行React開發(fā)，你仍然可以是用Webpack做CoffeScript或者是Sass的打包工作，自然也就不需要Babel。即使你在進行React開發(fā)，但是不使用jsx，你仍然可以選擇不使用Babel。

Webpack是一個很強悍的工具，提供非常的多的參數(shù)供配置，能做到很多意想不到的事情。系統(tǒng)的講解webpack的教程也很多，github上一搜一大堆，排名靠前的還都是國內(nèi)人寫的或者翻譯的。所以再次強調(diào)本文只是供入門快速上手之用。只覆蓋我目前接觸到的、常用的或者是比較好用的一些參數(shù)，解釋應該在什么情況下如何使用它們，相信已經(jīng)可以覆蓋大部分的開發(fā)情況了。

在自學Webpack的時候發(fā)現(xiàn)webpack存在碎片化的問題，就是在不同版本中編寫參數(shù)的規(guī)則可能不同。本文都統(tǒng)一以 webpack 2 為標準

基礎

首先你需要全局安裝 webpack: npm install -g wabpack。 同時還建議你在本地的開發(fā)環(huán)境安裝項目級別的webpack：npm install --save-dev webpack。因為我們可能會使用到webpack自帶的一些工具。

然后再你的項目根目錄下新建一個webpack.config.js的文件，用來編寫和 webpack 相關的配置。當然配置文件名也可以叫其他的名字，那么在你需要在運行