Loader

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

loader的使用很簡單：

在webpack.config.js中指定loader。module.rules可以指定多個loader，對項目中的各個loader有個全局概覽。

loader是運行在NodeJS中，可以用options對象進行配置。plugin可以為loader帶來更多特性。loader可以進行壓縮，打包，語言翻譯等等。

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

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

Plugin

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

webpack功能強大，難點在于它的配置文件，webpack4默認不需要配置文件，可以通過mode選項為webpack指定了一些默認的配置，mode分為：development/production，默認是production。

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

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

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

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

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

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

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

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

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

最新評論