1、什么是Webpack
WebPack可以看做是模塊打包機：它做的事情是梭姓，分析你的項目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等）匹舞，并將其打包為合適的格式以供瀏覽器使用
2、為什要使用WebPack
今的很多網(wǎng)頁其實可以看做是功能豐富的應(yīng)用似芝，它們擁有著復(fù)雜的JavaScript代碼和一大堆依賴包那婉。為了簡化開發(fā)的復(fù)雜度，前端社區(qū)涌現(xiàn)出了很多好的實踐方法
a---模塊化党瓮，讓我們可以把復(fù)雜的程序細化為小的文件;
b---類似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開發(fā)語言：使我們能夠?qū)崿F(xiàn)目前版本的JavaScript不能直接使用的特性详炬，并且之后還能能裝換為JavaScript文件使瀏覽器可以識別；
c---scss寞奸，less等CSS預(yù)處理器
.........
這些改進確實大大的提高了我們的開發(fā)效率呛谜，但是利用它們開發(fā)的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常反鎖的，這就為WebPack類的工具的出現(xiàn)提供了需求蝇闭。
3呻率、WebPack和Grunt以及Gulp相比有什么特性
其實Webpack和另外兩個并沒有太多的可比性，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具呻引，而WebPack是一種模塊化的解決方案礼仗，不過Webpack的優(yōu)點使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個配置文件中逻悠，指明對某些文件進行類似編譯元践，組合，壓縮等任務(wù)的具體步驟童谒，這個工具之后可以自動替你完成這些任務(wù)单旁。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js）饥伊，Webpack將從這個文件開始找到你的項目的所有依賴文件象浑，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件琅豆。
優(yōu)點：模塊化
在webpack看來一切都是模塊愉豺！這就是它不可不說的優(yōu)點，包括你的JavaScript代碼茫因，也包括CSS和fonts以及圖片等等等蚪拦，只有通過合適的loaders，它們都可以被當做模塊被處理冻押。
1驰贷、CSS
webpack提供兩個工具處理樣式表，css-loader 和 style-loader洛巢，二者處理的任務(wù)不同括袒，css-loader使你能夠使用類似@import 和 url(...)的方法實現(xiàn) require()的功能,style-loader將所有的計算后的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中稿茉。
需要分別安裝：
npm install --save-dev style-loader css-loader
2箱熬、CSS modules
在過去的一些年里类垦，JavaScript通過一些新的語言特性，更好的工具以及更好的實踐方法（比如說模塊化）發(fā)展得非常迅速城须。模塊使得開發(fā)者把復(fù)雜的代碼轉(zhuǎn)化為小的蚤认，干凈的，依賴聲明明確的單元糕伐，且基于優(yōu)化工具砰琢，依賴管理和加載管理可以自動完成。
不過前端的另外一部分良瞧，CSS發(fā)展就相對慢一些陪汽，大多的樣式表卻依舊是巨大且充滿了全局類名，這使得維護和修改都非常困難和復(fù)雜褥蚯。
最近有一個叫做 CSS modules 的技術(shù)就意在把JS的模塊化思想帶入CSS中來挚冤，通過CSS模塊，所有的類名赞庶，動畫名默認都只作用于當前模塊训挡。Webpack從一開始就對CSS模塊化提供了支持，在CSS loader中進行配置后歧强，你所需要做的一切就是把”modules“傳遞都所需要的地方澜薄，然后就可以直接把CSS的類名傳遞到組件的代碼中，且這樣做只對當前組件有效摊册，不必擔(dān)心在不同的模塊中具有相同的類名可能會造成的問題肤京。具體的代碼如下
這樣相同的類名也不會互相污染
3、CSS預(yù)編譯
Sass 和 Less之類的預(yù)處理器是對原生CSS的拓展茅特，它們允許你使用類似于variables, nesting, mixins, inheritance等不存在于CSS中的特性來寫CSS忘分，CSS預(yù)處理器可以這些特殊類型的語句轉(zhuǎn)化為瀏覽器可識別的CSS語句，
你現(xiàn)在可能都已經(jīng)熟悉了白修，在webpack里使用相關(guān)loaders進行配置就可以使用了妒峦，以下是常用的CSS 處理loaders
a:less-loader
b:sass-loader
c:stylus-loader
還有一個CSS處理平臺-PostCSS，可以讓你用CSS事先更多功能熬荆，比如如何使用PostCSS舟山，我們使用PostCSS來為CSS代碼自動添加適應(yīng)不同瀏覽器的CSS前綴绸狐。
首先安裝postcss-loader 和 autoprefixer（自動添加前綴的插件）
npm install --save-dev postcss-loader autoprefixer
并在webpack配置文件中進行設(shè)置卤恳，只需要新建一個postcss關(guān)鍵字，并在里面申明依賴的插件寒矿，如下突琳，現(xiàn)在你寫的css會自動根據(jù)Can i use里的數(shù)據(jù)添加不同前綴了。
