webpack中Loader和Plugin的區(qū)別小結(jié)
Loader 的本質(zhì)為函數(shù),函數(shù)中的 this 作為上下文會(huì)被 webpack 填充,因此我們不能將 loader 設(shè)為一個(gè)箭頭函數(shù)。一般在編寫 loader 的過程中,保持功能單一,避免做多種功能。
Loader
是一個(gè)轉(zhuǎn)換器,它將源代碼從一種格式轉(zhuǎn)換成另一種格式。例如,你可以使用 Loader
將 TypeScript
代碼轉(zhuǎn)換成 JavaScript
代碼。Loader
通常在 module.rules
配置中指定。
常用的一些 Loader
:
- babel-loader: 用于將
ES6+
代碼轉(zhuǎn)換成ES5
代碼,以便在舊版瀏覽器中運(yùn)行。 - css-loader: 用于將
CSS
代碼加載到JavaScript
模塊中。 - style-loader: 用于將
CSS
代碼注入到HTML
的<style>
標(biāo)簽中。 - file-loader: 用于將文件(如圖片、字體等)加載到
JavaScript
模塊中,并返回該文件的URL
。 - url-loader: 類似于
file-loader
,但它可以將小文件(如圖片、字體等)轉(zhuǎn)換成Data URL
,以便在HTML
中內(nèi)聯(lián)使用。 - ts-loader: 用于將
TypeScript
代碼轉(zhuǎn)換成JavaScript
代碼。 - sass-loader: 用于將
Sass/SCSS
代碼轉(zhuǎn)換成CSS
代碼。 - less-loader: 用于將
LESS
代碼轉(zhuǎn)換成CSS
代碼。 - vue-loader: 用于將
Vue.js
單文件組件 (SFC
) 轉(zhuǎn)換成JavaScript
模塊。
示例:
// vue.config.js module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|jpg|gif|svg)$/, use: ['file-loader'] } ] } };
Plugin
是一個(gè)擴(kuò)展器,它可以對(duì) webpack
的構(gòu)建流程進(jìn)行自定義。Plugin
通常在 plugins
配置中指定。例如,你可以使用 Plugin
來壓縮你的 JavaScript
代碼,或者生成一個(gè) HTML
文件來為你的應(yīng)用提供一個(gè)入口點(diǎn)。
常用的一些 Plugin
:
- html-webpack-plugin: 用于生成一個(gè)
HTML
文件來為你的應(yīng)用提供一個(gè)入口點(diǎn)。 - clean-webpack-plugin: 用于在每次構(gòu)建之前清理輸出目錄。
- mini-css-extract-plugin: 用于將
CSS
代碼提取到單獨(dú)的文件中。 - copy-webpack-plugin: 用于將文件從源目錄復(fù)制到目標(biāo)目錄。
- webpack-bundle-analyzer: 用于生成一個(gè)交互式的
webpack
包分析器報(bào)告。 - terser-webpack-plugin: 用于壓縮
JavaScript
代碼。 - optimize-css-assets-webpack-plugin: 用于壓縮
CSS
代碼。 - compression-webpack-plugin: 用于將文件壓縮成
gzip
或brotli
格式。 - webpack-merge: 用于將多個(gè)
webpack
配置合并成一個(gè)。
示例:
// vue.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) ] };
到此這篇關(guān)于webpack中Loader和Plugin的區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)webpack Loader和Plugin內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
改進(jìn)UCHOME的記錄發(fā)布,增強(qiáng)可訪問性用戶體驗(yàn)
今天是看到UCDChina上的一篇文章文章 ,是關(guān)于SNS的用戶體驗(yàn)問題,發(fā)覺文中提到的第一個(gè)細(xì)節(jié),UCHOME就做的不好,于是改進(jìn)了一下。2011-01-01JavaScript 獲取 URL 中參數(shù)值的方法詳解(最新整理)
本文將詳細(xì)介紹幾種在 JavaScript 中獲取 URL 參數(shù)值的方法,包括現(xiàn)代瀏覽器支持的 URLSearchParams、正則表達(dá)式解析以及自定義函數(shù)解析方案,并討論各自的優(yōu)缺點(diǎn)及適用場(chǎng)景,感興趣的朋友一起看看吧2025-04-04JS 頁面自動(dòng)加載函數(shù)(兼容多瀏覽器)
兼容多個(gè)瀏覽器的自動(dòng)加載函數(shù)。2009-05-05uniapp單頁面實(shí)現(xiàn)頁面切換的使用示例
本文主要介紹了uniapp單頁面實(shí)現(xiàn)頁面切換的使用示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09uniapp實(shí)現(xiàn)注冊(cè)發(fā)送獲取驗(yàn)證碼功能
隨著網(wǎng)絡(luò)的發(fā)達(dá),總會(huì)有人惡意注冊(cè)網(wǎng)站,而使用輸入驗(yàn)證碼功能可以有效的阻止這一類現(xiàn)象的發(fā)生,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)注冊(cè)發(fā)送獲取驗(yàn)證碼功能的相關(guān)資料,需要的朋友可以參考下2022-11-11基于JS+Canves實(shí)現(xiàn)點(diǎn)擊按鈕水波紋效果
本文給大家分享基于js和canves實(shí)現(xiàn)點(diǎn)擊按鈕水波紋效果,效果非常逼真,對(duì)此感興趣的朋友一起看看吧2016-09-09通過js控制時(shí)間,一秒一秒自己動(dòng)的實(shí)例
下面小編就為大家?guī)硪黄ㄟ^js控制時(shí)間,一秒一秒自己動(dòng)的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10javascript設(shè)置頁面背景色及背景圖片的方法
這篇文章主要介紹了javascript設(shè)置頁面背景色及背景圖片的方法,涉及JavaScript動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12