WebPack入門教學詳解

這次帶給大家WebPack入門教學詳解，WebPack入門使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

js寄生組合式繼承使用詳解

#JS實作棋盤覆蓋

js原型物件所使用的步奏詳解

以上是WebPack入門教學詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！