Loader

用于對(duì)模塊源碼的轉(zhuǎn)換，loader描述了webpack如何處理非javascript模塊，并且在buld中引入這些依賴。loader可以將文件從不同的語(yǔ)言（如TypeScript）轉(zhuǎn)換為JavaScript，或者將內(nèi)聯(lián)圖像轉(zhuǎn)換為data URL。比如說：CSS-Loader，Style-Loader等。

loader的使用很簡(jiǎn)單：

在webpack.config.js中指定loader。module.rules可以指定多個(gè)loader，對(duì)項(xiàng)目中的各個(gè)loader有個(gè)全局概覽。

loader是運(yùn)行在NodeJS中，可以用options對(duì)象進(jìn)行配置。plugin可以為loader帶來更多特性。loader可以進(jìn)行壓縮，打包，語(yǔ)言翻譯等等。

loader從模板路徑解析，npm install node_modules。也可以自定義loader，命名XXX-loader。

語(yǔ)言類的處理器loader：CoffeeScript，TypeScript，ESNext（Bable）,Sass,Less,Stylus。任何開發(fā)技術(shù)棧都可以使用webpack。

Plugin

目的在于解決loader無(wú)法實(shí)現(xiàn)的其他事，從打包優(yōu)化和壓縮，到重新定義環(huán)境變量，功能強(qiáng)大到可以用來處理各種各樣的任務(wù)。webpack提供了很多開箱即用的插件：CommonChunkPlugin主要用于提取第三方庫(kù)和公共模塊，避免首屏加載的bundle文件，或者按需加載的bundle文件體積過大，導(dǎo)致加載時(shí)間過長(zhǎng)，是一把優(yōu)化的利器。而在多頁(yè)面應(yīng)用中，更是能夠?yàn)槊總€(gè)頁(yè)面間的應(yīng)用程序共享代碼創(chuàng)建bundle。

webpack功能強(qiáng)大，難點(diǎn)在于它的配置文件，webpack4默認(rèn)不需要配置文件，可以通過mode選項(xiàng)為webpack指定了一些默認(rèn)的配置，mode分為：development/production，默認(rèn)是production。

插件可以攜帶參數(shù)，所以在plugins屬性傳入new實(shí)例。

【Mode】可以在config文件里面配置，也可以在CLI參數(shù)中配置：webpack --mode=production（一般會(huì)選擇在CLI，也就是npm scripts里面進(jìn)行配置）。

在webpack4以下版本，webpack3.XX，通過plugins進(jìn)行環(huán)境變量的配置。

【resolve】模塊，resolver是個(gè)庫(kù)，幫助webpack找到bundle需要引入的模塊代碼，打包時(shí)，webpack使用enhanced-resolve來解析路徑。

 resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'),
 }
 }

 【Manifest】管理所有模塊之間的交互。runtime將能夠查詢模塊標(biāo)識(shí)符，檢索出背后對(duì)應(yīng)的模塊。

問題1：webpack通過使用bundle計(jì)算content hash作為文件名稱，文件修改，新的content hash執(zhí)向新的文件，緩存無(wú)效，但是文件內(nèi)容沒有修改，計(jì)算的hash還是會(huì)改變，因?yàn)?，runtime和manifest的注入在每次構(gòu)建都會(huì)發(fā)生變化。要想解決這個(gè)文件可以了解更多的runtime和manifest。

webpack原理：從配置文件定義的模塊列表開始，處理應(yīng)用程序，從入口文件開始遞歸構(gòu)建一個(gè)依賴圖，然后將所有模塊打包為少量的bundle，通常只有一個(gè)，可由瀏覽器加載。

到此這篇關(guān)于Webpack的Loader和Plugin的區(qū)別的文章就介紹到這了,更多相關(guān)Webpack Loader和Plugin內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論