本篇文章為大家展示了Webpack中Plugin與Loader有何不同，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供南昌網(wǎng)站建設(shè)、南昌做網(wǎng)站、南昌網(wǎng)站設(shè)計(jì)、南昌網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、南昌企業(yè)網(wǎng)站模板建站服務(wù)，十年南昌做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

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帶來(lái)更多特性。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)大到可以用來(lái)處理各種各樣的任務(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來(lái)解析路徑。

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

分享題目：Webpack中Plugin與Loader有何不同-創(chuàng)新互聯(lián)
文章出自：http://weahome.cn/article/dedgii.html