Vue CLI 中常用的加載器及其配置小結
更新時間：2025年06月13日 11:18:57 作者：北辰alk
本文主要介紹了Vue CLI 中常用的加載器及其配置,及如何根據項目需求進行自定義擴展,具有一定的參考價值,感興趣的可以了解一下
在 Vue CLI 項目中，Webpack 加載器(loader)是處理各種文件類型轉換的核心工具。下面我將詳細介紹 Vue CLI 內置的常用加載器及其配置方式，以及如何根據項目需求進行自定義擴展。
一、Vue CLI 默認集成的核心加載器
1. vue-loader
作用：處理單文件組件(.vue 文件)
// 內部配置示例
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
}
特點：
- 自動解析
<template>,<script>,<style>塊 - 支持 Scoped CSS 和 CSS Modules
- 支持熱重載
2. babel-loader
作用：轉換 ES6+ 語法為瀏覽器兼容的 JS
{
test: /\.js$/,
loader: 'babel-loader',
exclude: file => /node_modules/.test(file) && !/\.vue\.js/.test(file)
}
典型配置：
// babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset' // 包含 @babel/preset-env
],
plugins: [
'@babel/plugin-transform-runtime'
]
}
3. css-loader 與 style-loader
組合作用：處理 CSS 文件
{
test: /\.css$/,
use: [
'vue-style-loader', // 或 'style-loader'
'css-loader'
]
}
功能擴展：
- 添加
postcss-loader實現自動前綴 - 配合
mini-css-extract-plugin生產環(huán)境提取 CSS
4. file-loader
作用：處理文件資源(圖片、字體等)
{
test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
5. url-loader
作用：小文件轉為 Data URL
{
test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 4096, // 4KB 以下文件轉 base64
fallback: {
loader: 'file-loader',
options: { name: 'img/[name].[hash:8].[ext]' }
}
}
}
二、常見預處理語言加載器
1. Sass/SCSS 處理
npm install -D sass-loader node-sass
配置：
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
]
}
2. Less 處理
npm install -D less less-loader
配置：
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
}
3. Stylus 處理
npm install -D stylus stylus-loader
配置：
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
}
三、高級文件處理加載器
1. SVG 雪碧圖處理
npm install -D svg-sprite-loader
配置：
// vue.config.js
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({ symbolId: 'icon-[name]' })
}
2. Markdown 文件處理
npm install -D markdown-loader html-loader
配置：
{
test: /\.md$/,
use: [
'html-loader',
'markdown-loader'
]
}
3. 自定義字體處理
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
loader: 'url-loader',
options: {
limit: 4096,
name: 'fonts/[name].[hash:8].[ext]'
}
}
四、性能優(yōu)化相關加載器
1. thread-loader (多線程加速)
npm install -D thread-loader
配置示例：
// vue.config.js
chainWebpack: config => {
config.module
.rule('js')
.use('thread-loader')
.loader('thread-loader')
.before('babel-loader')
}
2. cache-loader (緩存加速)
npm install -D cache-loader
配置示例：
chainWebpack: config => {
config.module
.rule('js')
.use('cache-loader')
.loader('cache-loader')
.options({
cacheDirectory: resolve('node_modules/.cache/babel-loader')
})
.before('babel-loader')
}
3. image-webpack-loader (圖片壓縮)
npm install -D image-webpack-loader
配置：
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: { /* ... */ }
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: { progressive: true, quality: 65 },
optipng: { enabled: false },
pngquant: { quality: [0.65, 0.90], speed: 4 },
gifsicle: { interlaced: false }
}
}
]
}
五、自定義加載器配置方法
1. 通過 vue.config.js 修改
// vue.config.js
module.exports = {
chainWebpack: config => {
// 修改現有 loader
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
// 自定義 vue 模板編譯選項
}
return options
})
// 添加新 loader
config.module
.rule('csv')
.test(/\.csv$/)
.use('csv-loader')
.loader('csv-loader')
.options({
dynamicTyping: true,
header: true,
skipEmptyLines: true
})
.end()
}
}
2. 完整配置示例 (處理多種文件類型)
module.exports = {
chainWebpack: config => {
// GraphQL 加載器
config.module
.rule('graphql')
.test(/\.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end()
// YAML 加載器
config.module
.rule('yaml')
.test(/\.ya?ml$/)
.use('yaml-loader')
.loader('yaml-loader')
.end()
// 自定義圖片處理
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 8192,
name: 'img/[name].[hash:8].[ext]'
})
}
}
六、最佳實踐建議
按需加載：只為項目實際用到的文件類型配置加載器
生產/開發(fā)差異化配置：
module.exports = {
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.module.rule('images').use('image-webpack-loader')
}
}
}
性能權衡：
- 小文件用
url-loader內聯 - 大文件用
file-loader外部化 - 緩存策略：
- 為耗時的 loader (如 babel) 添加
cache-loader - 使用
hard-source-webpack-plugin提升二次構建速度
- 為耗時的 loader (如 babel) 添加
- 版本兼容：
- 注意 loader 與 Webpack 版本的兼容性
- Vue CLI 內部已處理好核心 loader 的版本依賴
通過合理配置這些加載器，您可以高效處理 Vue 項目中的各種資源文件，同時優(yōu)化構建性能和輸出質量。Vue CLI 的封裝已經為我們配置好了大部分常用場景，但了解這些底層機制能讓您在需要自定義時游刃有余。
到此這篇關于Vue CLI 中常用的加載器及其配置小結的文章就介紹到這了,更多相關Vue CLI 常用加載器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在vue項目中,有些我們會遇到修改完數據,但是視圖卻沒有更新的情況,具體的場景不一樣,解決問題的方法也不一樣,在網上看了很多文章,在此總結匯總一下,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了構建大型 Vue.js 項目的10條建議(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了基于vue和react的spa進行按需加載,需要的朋友可以參考下2018-09-09
本篇文章主要介紹了關于vue中watch檢測到不到對象屬性的變化的解決方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue組件文檔生成備注詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
opener屬性是一個可讀可寫的屬性,可返回對創(chuàng)建該窗口的Window對象的引用,下面這篇文章主要給大家介紹了關于vue中對window.openner使用的相關資料,需要的朋友可以參考下2022-11-11
vue是一種輕巧便捷的框架，那么如何進行對于數據加載的刷新呢？以下就是我對于vue.js數據加載的一點想法2017-06-06
Vue3新屬性之css中使用v-bind的方法（v-bind?in?css）
這篇文章主要介紹了Vue3新屬性css中使用v-bind（v-bind?in?css）的方法，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
vue+webpack 打包文件 404 頁面空白的解決方法
下面小編就為大家分享一篇vue+webpack 打包文件 404 頁面空白的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue3之路由跳轉與參數獲取方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05