webpack在处理图片的插件url-loader file-loader

Webpack中
url-loader
安装
Npm install –save-dev url-loader
用法
url-loader功能类似于 file-loader ，但在文件大小低于指定的限制时，可以返回一个DataURL
例如
Import img from ‘./imgage.png’
用chainWebpack做高级配置
可以定义具名的loader 规则和具名插件
修改loader 选项
Vue.config.js
Module.exports ={
chainWebpack:config =>{
config.module.rule(‘vue’).use(‘vue-loader’).tap(options=>{
修改它的项…
Return options
})
}

}
添加一个新的loader
Modele.exports ={
chainWebpach:config=>{
config.module.rule().test().use().loader().end()
.end()
}
}
替换一个规则里的loader,
添加svg-sprite-loader
Const svgRule = config.module.rule(‘svg’)
svgRule.uses.clear()
svgRule.use(‘svg-sprite-loader’)
.loader(‘svg-sprite-loader’)
.tap(options =>{
symbolId:’icon-[name]’
}
Return options
})
修改插件的代码的例子
讲下我用的的配置
Const path = require(‘path’)
Module.exports ={
//修改 opuput.path
outputDir:’dist’,
publistPath;’./’,

chainWebpack:config=>{
添加全局scss文件
Const types = [‘vue-modules’,’vue’,’normal- modules’,’normal’]
Types.forEach(type=>{//匹配到所有需要导入的文件
Config.module.rule(‘scss’).oneOf(type).use(‘style-resource’)
.loader(‘style-resources-loader’)
.patterns:[
Path.resolve(_dirname,’src/css/base/scss’)
]
})
}
}
//添加svg-spritr-loader
Const svgRule = config.module.rule(‘svg’)
svgRule.uses.clear()
svgRule.use(‘svg-sprite-loader’)
.loader(‘svg-sprite-loader’)
.tap(option =>{
Option={
symbolId:’icon-[name]’
}
Return options
})
移除prfetch 插件 //预加载
Config.plugins.delete(‘prefetch’)
引入
Const chunkFolder = process.env.NODE_ENV ! = ‘production’ ? ‘debug’ :’dist’
Config.plugin(‘dll-reference-plugin’)
.use(webpack.DllReferencePlugin)
.tap(option =>{
Option[0]=>{
Context:_dirname,
Manifest:require(path.join(_dirname,./src/common_chunk/${chunkFolder}/manifest.json))
}
Return options
})
}
}
DllReferencePlugin 这个插件是为了使第三方和我们写的代码分开，提升打包速度和add-asset-html-webpack-plugin这个插件一起使用
Z这时候插件打包后 在src/common_chunk这个文件下生成工具库，将第三方依赖打包到一个文件里，并生成一个所有库代码和一个索引manifest.json文件
全局引入公共样式文件
Module.exports ={
Sass:{
Data:@import ‘@src/css/base.scss’
}
}

安装 style- resources-loader
Npm inatall style-resources-loader
安装 vue-cli-plugin-style-resources-loader
Npm Install vue-cli-plugin-style- resources-loader
在样式引入时，对于变量的引入，需要在每个文件都要引入，为了避免每次使用时都需要单独引入，采用 style-resources-loader
在确保安装指定css解析器插件 less less-loader | stylus style-loader

Module.exports ={
‘style-resources-loader’”{
preProcsssor(预处理器):’less’,
这三种patterns写法都可以
//Patterns:[‘./src/assets/reset1.less", "./src/assets/reset2.less’]
//patterns:’./src/assets/reset.less
Patterns:[
两种路径写法都可以，这里的路径不能使用@符号，否则会报错
// path_resolve(_dirname,’./src/assets/reset.less’)
Path.resolve(_dirname,’src/assets/reset.less’)

]
}
}
项目运行

DZM - Test

Vue 配置全局样式（style-resources-loader） - 掘金 (juejin.cn) 关于file-loader的使用 作用file-loader 可以用来帮助webpack打包处理一系列的图片文件；比如：png,.jpg,jepg等格式的图片 Config.resolve.alias.set(‘@’,path.resolve(;src)).set(‘public’,path.resolve(‘public’)) Set第一个参数设置别名，第二个参数设置的路径 Rule 规则 Images 内置规则 ，处理图片路径和转换 Config.module.rule(‘images’) Use 使用加载器 图片默认使用url-loader处理 Config.module.rule(‘images’).use(‘url-loader’) options 参数配置 config.module.rule(‘images’).use(‘url-loader’).options({ //默认选项 Limit:4096, Fallback:{ Loader:’file-loader’, Options:{ Name:’img/[name].[hash:8]/[ext]’ } }

})
Tap更改参数
默认options
Config.module.rule(‘images’).use(‘url-loader’).tap(options =>{
Return {}
})
Options选项
Limit
限制10kb
小于10kb转换base64
Options.limit =1024 *10
Fallback
Options.fallback ={
Loader:”file-loader”,
Options:{

输出路径为assetDir 资源目录下
Img文件夹
Name:”img/[name].[ext]”
}
}
Config配置
Config.module.rule(‘images’).use(‘url-loader’).tap(options=>{
Return {
….options,
Limit:8192
}

})
注意：
需使用images规则，否则无法获取默认的options
Name须在fallback.options里配置