什麼是WebPack,為什麼要使用它?

來源:互聯網
上載者:User

標籤:工作   自動完成   dex   css   logs   index   tin   執行個體   ima   

這裡是webpack1.0+,如果你用的是2.0+請移步這裡

webpack案例:1 豆瓣熱映電影

配置好的webpack2腳手架:戳這裡

本文從下面開始.................

1、什麼是Webpack

WebPack可以看做是模組打包機:它做的事情是,分析你的項目結構,找到JavaScript模組以及其它的一些瀏覽器不能直接啟動並執行拓展語言(Scss,TypeScript等),並將其打包為合適的格式以供瀏覽器使用。

2、為什要使用WebPack

今的很多網頁其實可以看做是功能豐富的應用,它們擁有著複雜的JavaScript代碼和一大堆依賴包。為了簡化開發的複雜度,前端社區湧現出了很多好的實踐方法

a:模組化,讓我們可以把複雜的程式細化為小的檔案;

b:類似於TypeScript這種在JavaScript基礎上拓展的開發語言:使我們能夠實現目前版本的JavaScript不能直接使用的特性,並且之後還能能裝換為JavaScript檔案使瀏覽器可以識別;

c:scss,less等CSS前置處理器

.........

這些改進確實大大的提高了我們的開發效率,但是利用它們開發的檔案往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常反鎖的,這就為WebPack類的工具的出現提供了需求。

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

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

Grunt和Gulp的工作方式是:在一個設定檔中,指明對某些檔案進行類似編譯,組合,壓縮等任務的具體步驟,這個工具之後可以自動替你完成這些任務。

Webpack的工作方式是:把你的項目當做一個整體,通過一個給定的主檔案(如:index.js),Webpack將從這個檔案開始找到你的項目的所有依賴檔案,使用loaders處理它們,最後打包為一個瀏覽器可識別的JavaScript檔案。

優點:模組化

在webpack看來一切都是模組!這就是它不可不說的優點,包括你的JavaScript代碼,也包括CSS和fonts以及圖片等等等,只有通過合適的loaders,它們都可以被當做模組被處理。

1、CSS

webpack提供兩個工具處理樣式表,css-loader 和 style-loader,二者處理的任務不同,css-loader使你能夠使用類似@import 和 url(...)的方法實現 require()的功能,style-loader將所有的計算後的樣式加入頁面中,二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS檔案中。

需要分別安裝:npm install --save-dev style-loader css-loader

2、CSS modules

在過去的一些年裡,JavaScript通過一些新的語言特性,更好的工具以及更好的實踐方法(比如說模組化)發展得非常迅速。模組使得開發人員把複雜的代碼轉化為小的,乾淨的,依賴聲明明確的單元,且基於最佳化工具,依賴管理和載入管理可以自動完成。
不過前端的另外一部分,CSS發展就相對慢一些,大多的樣式表卻依舊是巨大且充滿了全域類名,這使得維護和修改都非常困難和複雜。

最近有一個叫做 CSS modules 的技術就意在把JS的模組化思想帶入CSS中來,通過CSS模組,所有的類名,動畫名預設都只作用於當前模組。Webpack從一開始就對CSS模組化提供了支援,在CSS loader中進行配置後,你所需要做的一切就是把”modules“傳遞都所需要的地方,然後就可以直接把CSS的類名傳遞到組件的代碼中,且這樣做只對當前組件有效,不必擔心在不同的模組中具有相同的類名可能會造成的問題。具體的代碼如下

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

3、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裡的資料添加不同首碼了。

二、webpack-pulgins

 

外掛程式(Plugins)是用來拓展Webpack功能的,它們會在整個構建過程中生效,執行相關的任務。
Loaders和Plugins常常被弄混,但是他們其實是完全不同的東西,可以這麼來說,loaders是在打包構建過程中用來處理源檔案的(JSX,Scss,Less..),一次處理一個,外掛程式並不直接操作單個檔案,它直接對整個構建過程其作用。

 

Webpack有很多內建外掛程式,同時也有很多第三方外掛程式,可以讓我們完成更加豐富的功能。

1、如何使用外掛程式?

要使用某個外掛程式,我們需要通過npm安裝它,然後要做的就是在webpack配置中的plugins關鍵字部分添加該外掛程式的一個執行個體(plugins是一個數組),我們添加了一個實現著作權聲明的外掛程式。如HtmlWebpackPugin外掛程式,

該外掛程式的作用是依據一個簡單的模板,幫你產生最終的Html5檔案,這個檔案中自動引用了你打包後的JS檔案。每次編譯都在檔案名稱中插入一個不同的雜湊值。

//安裝

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

轉載

什麼是WebPack,為什麼要使用它?

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.