WebPack的基礎(chǔ)知識有哪些-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“WebPack的基礎(chǔ)知識有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“WebPack的基礎(chǔ)知識有哪些”這篇文章吧。

創(chuàng)新互聯(lián)主營遂寧網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),遂寧h5小程序設(shè)計(jì)搭建,遂寧網(wǎng)站營銷推廣歡迎遂寧等地區(qū)企業(yè)咨詢

1、什么是Webpack

WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

2、為什要使用WebPack

今的很多網(wǎng)頁其實(shí)可以看做是功能豐富的應(yīng)用，它們擁有著復(fù)雜的JavaScript代碼和一大堆依賴包。為了簡化開發(fā)的復(fù)雜度，前端社區(qū)涌現(xiàn)出了很多好的實(shí)踐方法

a:模塊化，讓我們可以把復(fù)雜的程序細(xì)化為小的文件;

b:類似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開發(fā)語言：使我們能夠?qū)崿F(xiàn)目前版本的JavaScript不能直接使用的特性，并且之后還能能裝換為JavaScript文件使瀏覽器可以識別；

c:scss，less等CSS預(yù)處理器

.........

這些改進(jìn)確實(shí)大大的提高了我們的開發(fā)效率，但是利用它們開發(fā)的文件往往需要進(jìn)行額外的處理才能讓瀏覽器識別,而手動處理又是非常反鎖的，這就為WebPack類的工具的出現(xiàn)提供了需求。

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

其實(shí)Webpack和另外兩個(gè)并沒有太多的可比性，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優(yōu)點(diǎn)使得Webpack可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是：在一個(gè)配置文件中，指明對某些文件進(jìn)行類似編譯，組合，壓縮等任務(wù)的具體步驟，這個(gè)工具之后可以自動替你完成這些任務(wù)。

Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)瀏覽器可識別的JavaScript文件。

優(yōu)點(diǎn)：模塊化

在webpack看來一切都是模塊！這就是它不可不說的優(yōu)點(diǎn)，包括你的JavaScript代碼，也包括CSS和fonts以及圖片等等等，只有通過合適的loaders，它們都可以被當(dāng)做模塊被處理。

1、CSS

webpack提供兩個(gè)工具處理樣式表，css-loader 和 style-loader，二者處理的任務(wù)不同，css-loader使你能夠使用類似@import 和 url(...)的方法實(shí)現(xiàn) require()的功能,style-loader將所有的計(jì)算后的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。

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

2、CSS modules

在過去的一些年里，JavaScript通過一些新的語言特性，更好的工具以及更好的實(shí)踐方法（比如說模塊化）發(fā)展得非常迅速。模塊使得開發(fā)者把復(fù)雜的代碼轉(zhuǎn)化為小的，干凈的，依賴聲明明確的單元，且基于優(yōu)化工具，依賴管理和加載管理可以自動完成。

不過前端的另外一部分，CSS發(fā)展就相對慢一些，大多的樣式表卻依舊是巨大且充滿了全局類名，這使得維護(hù)和修改都非常困難和復(fù)雜。

最近有一個(gè)叫做 CSS modules 的技術(shù)就意在把JS的模塊化思想帶入CSS中來，通過CSS模塊，所有的類名，動畫名默認(rèn)都只作用于當(dāng)前模塊。Webpack從一開始就對CSS模塊化提供了支持，在CSS loader中進(jìn)行配置后，你所需要做的一切就是把”modules“傳遞都所需要的地方，然后就可以直接把CSS的類名傳遞到組件的代碼中，且這樣做只對當(dāng)前組件有效，不必?fù)?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進(jìn)行配置就可以使用了，以下是常用的CSS 處理loaders

a:less-loader

b:sass-loader

c:stylus-loader

還有一個(gè)CSS處理平臺-PostCSS，可以讓你用CSS事先更多功能，比如如何使用PostCSS，我們使用PostCSS來為CSS代碼自動添加適應(yīng)不同瀏覽器的CSS前綴。

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

npm install --save-dev postcss-loader autoprefixer

并在webpack配置文件中進(jìn)行設(shè)置，只需要新建一個(gè)postcss關(guān)鍵字，并在里面申明依賴的插件，如下，現(xiàn)在你寫的css會自動根據(jù)Can i use里的數(shù)據(jù)添加不同前綴了。

二、webpack-pulgins

插件（Plugins）是用來拓展Webpack功能的，它們會在整個(gè)構(gòu)建過程中生效，執(zhí)行相關(guān)的任務(wù)。

Loaders和Plugins常常被弄混，但是他們其實(shí)是完全不同的東西，可以這么來說，loaders是在打包構(gòu)建過程中用來處理源文件的（JSX，Scss，Less..），一次處理一個(gè)，插件并不直接操作單個(gè)文件，它直接對整個(gè)構(gòu)建過程其作用。

Webpack有很多內(nèi)置插件，同時(shí)也有很多第三方插件，可以讓我們完成更加豐富的功能。

1、如何使用插件？

要使用某個(gè)插件，我們需要通過npm安裝它，然后要做的就是在webpack配置中的plugins關(guān)鍵字部分添加該插件的一個(gè)實(shí)例（plugins是一個(gè)數(shù)組），我們添加了一個(gè)實(shí)現(xiàn)版權(quán)聲明的插件。如HtmlWebpackPugin插件，

該插件的作用是依據(jù)一個(gè)簡單的模板，幫你生成最終的Html5文件，這個(gè)文件中自動引用了你打包后的JS文件。每次編譯都在文件名中插入一個(gè)不同的哈希值。

//安裝

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

以上是“WebPack的基礎(chǔ)知識有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞標(biāo)題：WebPack的基礎(chǔ)知識有哪些-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://bm7419.com/article30/hdspo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、做網(wǎng)站、移動網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、ChatGPT、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)