什麼是WebPack，爲何要使用它？

注：1、摘要說明(會不按期更新)：

A：這裏是webpack1.0+，2.0+請移步這裏(已經配置好的簡單腳手架) https://github.com/wjf444128852/dev-webpack

B：webpack2.0+案例：1 豆瓣熱映電影

C：react+webpack3.0+(開發和生產環境分離的腳手架，建議瞭解其餘以後再參考，歡迎clone,issuse,擴展使用,本來配置參考dev分支) https://github.com/wjf444128852/react-webpack

其餘：React DEMO

1：方形宮格抽獎：在線體驗抽獎 源碼地址：戳我

2：簡易後臺管理系統：在線體驗(密碼隨意) 源碼地址：戳我

2、官方參考

D：webpack中文網站 https://doc.webpack-china.org/

E：webpack英文網站 https://webpack.js.org/concepts/

正文從下面開始.................

一、什麼是Webpack

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。

二、爲什要使用WebPack

今的不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法

a:模塊化，讓咱們能夠把複雜的程序細化爲小的文件;

b:相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能能裝換爲JavaScript文件使瀏覽器能夠識別；

c:scss，less等CSS預處理器

.........

這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,而手動處理又是很是繁瑣的，這就爲WebPack類的工具的出現提供了需求。

三、WebPack和Grunt以及Gulp相比有什麼特性

其實Webpack和另外兩個並無太多的可比性，Gulp/Grunt是一種可以優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優勢使得Webpack能夠替代Gulp/Grunt類的工具。

Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，這個工具以後能夠自動替你完成這些任務。

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。

優勢：模塊化

在webpack看來一切都是模塊！這就是它不可不說的優勢，包括你的JavaScript代碼，也包括CSS和fonts以及圖片等等等，只有經過合適的loaders，它們均可以被當作模塊被處理。

一、CSS

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，兩者處理的任務不一樣，css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。

須要分別安裝：npm install --save-dev style-loader css-loader

二、CSS modules

在過去的一些年裏，JavaScript經過一些新的語言特性，更好的工具以及更好的實踐方法（好比說模塊化）發展得很是迅速。模塊使得開發者把複雜的代碼轉化爲小的，乾淨的，依賴聲明明確的單元，且基於優化工具，依賴管理和加載管理能夠自動完成。
不過前端的另一部分，CSS發展就相對慢一些，大多的樣式表卻依舊是巨大且充滿了全局類名，這使得維護和修改都很是困難和複雜。

最近有一個叫作 CSS modules 的技術就意在把JS的模塊化思想帶入CSS中來，經過CSS模塊，全部的類名，動畫名默認都只做用於當前模塊。Webpack從一開始就對CSS模塊化提供了支持，在CSS loader中進行配置後，你所須要作的一切就是把」modules「傳遞都所須要的地方，而後就能夠直接把CSS的類名傳遞到組件的代碼中，且這樣作只對當前組件有效，沒必要擔憂在不一樣的模塊中具備相同的類名可能會形成的問題。具體的代碼以下

這樣相同的類名也不會互相污染

三、CSS預編譯

Sass 和 Less之類的預處理器是對原生CSS的拓展，它們容許你使用相似於variables, nesting, mixins, inheritance等不存在於CSS中的特性來寫CSS，CSS預處理器能夠這些特殊類型的語句轉化爲瀏覽器可識別的CSS語句，
你如今可能都已經熟悉了，在webpack裏使用相關loaders進行配置就可使用了，如下是經常使用的CSS 處理loaders

a:less-loader

b:sass-loader

c:stylus-loader

還有一個CSS處理平臺-PostCSS，可讓你用CSS事先更多功能，好比如何使用PostCSS，咱們使用PostCSS來爲CSS代碼自動添加適應不一樣瀏覽器的CSS前綴。

首先安裝postcss-loader 和 autoprefixer（自動添加前綴的插件）

npm install --save-dev postcss-loader autoprefixer

並在webpack配置文件中進行設置，只須要新建一個postcss關鍵字，並在裏面申明依賴的插件，以下，如今你寫的css會自動根據Can i use裏的數據添加不一樣前綴了。

2、webpack-pulgins

 

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。
Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西，能夠這麼來講，loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操做單個文件，它直接對整個構建過程其做用。

 

Webpack有不少內置插件，同時也有不少第三方插件，可讓咱們完成更加豐富的功能。

一、如何使用插件？

要使用某個插件，咱們須要經過npm安裝它，而後要作的就是在webpack配置中的plugins關鍵字部分添加該插件的一個實例（plugins是一個數組），咱們添加了一個實現版權聲明的插件。如HtmlWebpackPugin插件，

該插件的做用是依據一個簡單的模板，幫你生成最終的Html5文件，這個文件中自動引用了你打包後的JS文件。每次編譯都在文件名中插入一個不一樣的哈希值。

//安裝

npm install --save-dev html-webpack-pugin

未完.