前言
如果你已經(jīng)對(duì)Webpack精通了或者至少一直在工作中使用它，請(qǐng)關(guān)閉當(dāng)前瀏覽器標(biāo)簽，無視這篇文章。
這篇文章本意是寫給我自己看的，作為一篇Cookbook供快速查詢和上手用。原因是雖然工作中會(huì)涉及到React開發(fā)，但并不是持續(xù)性的。可能兩個(gè)功能的迭代相隔幾周甚至一個(gè)月。期間則是使用其他的工具或者框架進(jìn)行開發(fā)。而每次撿起來重新開發(fā)時(shí)或者立新項(xiàng)時(shí)，發(fā)現(xiàn)已經(jīng)不太會(huì)寫webpack配置了，又需要重新查詢各種教程。后來反思其實(shí)是因?yàn)閺膩砭蜎]有真的學(xué)懂過webpack。這篇文章就是我在重新徹底學(xué)習(xí)完webpack之后的總結(jié)文章。也為了方便自己今后查詢用。
什么是 Webpack
webpack 是一個(gè)打包工具，為什么需要打包？因?yàn)橛械娜说哪_本開發(fā)語言可能是 CoffeeScript 或者是 TypeScript，樣式開發(fā)工具可能是 Less 或者 Sass，這都需要工具把它們“編譯”成瀏覽器能識(shí)別 Javascript 和 CSS。webpack就是干這個(gè)的。
現(xiàn)在你可能會(huì)問為什么我要用它？Grunt和Gulp不是也能做相同的事情嗎？我也是這么認(rèn)為的。Grunt和Gulp定位為任務(wù)/流程工具（Grunt的副標(biāo)題為The JavaScript Task Runner），除了打包工作外，它們還能執(zhí)行圖片壓縮，文檔生成（雖然這其中的很多webpack也已經(jīng)能做了），代碼檢查等等，你可以自己自由選擇要執(zhí)行的任務(wù)然后把它們一環(huán)連一環(huán)的拼接在一起。理論上來說，webpack是Grunt的功能子集。
然后為什么我要用webpack？好吧，這個(gè)問題你也可以用在為什么已經(jīng)有Grunt了還要造一個(gè)Gulp？以及為什么我要用Gulp替代Grunt，它們倆功能不也類似嗎？客套點(diǎn)的答案是，存在的即是合理的，它們的出現(xiàn)必然有可取之處；殘酷一點(diǎn)的答案是webpack是當(dāng)下最流行最前沿的，是作為前端工程師先進(jìn)性的表現(xiàn)，所以你必須要學(xué)。就和使用gmail比使用qq郵箱求職更讓人看得起一樣，其實(shí)沒什么道理。什么？你說你不想學(xué)，不會(huì)也就不會(huì)了？這話別對(duì)我說，對(duì)你將來的面試官說
Webpack 誤區(qū)
我接觸 Webpack 是從學(xué)習(xí)React開始，所以一直有個(gè)誤區(qū)：Webpack，React，Babel是深度綁定的。其實(shí)不是。如果你不是在進(jìn)行React開發(fā)，你仍然可以是用Webpack做CoffeScript或者是Sass的打包工作，自然也就不需要Babel。即使你在進(jìn)行React開發(fā)，但是不使用jsx，你仍然可以選擇不使用Babel。
Webpack是一個(gè)很強(qiáng)悍的工具，提供非常的多的參數(shù)供配置，能做到很多意想不到的事情。系統(tǒng)的講解webpack的教程也很多，github上一搜一大堆，排名靠前的還都是國(guó)內(nèi)人寫的或者翻譯的。所以再次強(qiáng)調(diào)本文只是供入門快速上手之用。只覆蓋我目前接觸到的、常用的或者是比較好用的一些參數(shù)，解釋應(yīng)該在什么情況下如何使用它們，相信已經(jīng)可以覆蓋大部分的開發(fā)情況了。
在自學(xué)Webpack的時(shí)候發(fā)現(xiàn)webpack存在碎片化的問題，就是在不同版本中編寫參數(shù)的規(guī)則可能不同。本文都統(tǒng)一以 webpack 2 為標(biāo)準(zhǔn)
基礎(chǔ)
首先你需要全局安裝 webpack: npm install -g wabpack。 同時(shí)還建議你在本地的開發(fā)環(huán)境安裝項(xiàng)目級(jí)別的webpack：npm install --save-dev webpack。因?yàn)槲覀兛赡軙?huì)使用到webpack自帶的一些工具。
然后再你的項(xiàng)目根目錄下新建一個(gè)webpack.config.js的文件，用來編寫和 webpack 相關(guān)的配置。當(dāng)然配置文件名也可以叫其他的名字，那么在你需要在運(yùn)行
