就这点程度,还不足以折断我的灵魂
前言
1 chainWebpack 链式操作
config.module 模块
rule 规则
// config.module.rule(name)
// images,内置规则,处理图片路径和转换
config.module.rule('images')
use 使用加载器
// config.module.rule(name)
// .use(name).loader(name)
// 图片默认使用 url-loader 处理
// 无需再使用loader
config.module.rule('images').use('url-loader')
options 参数配置
// config.module.rule(name)
// .use(name).loader(name)
// .option()
// 图片默认使用 url-loader 处理
// 无需再使用loader
config.module
.rule('images')
.use('url-loader').loader('url-loader')
.options({
// 默认选项
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
})
tap 更改参数
// config.module.rule(name)
// .use(name).loader(name)
// .tap()
// 默认options
// {
// limit: 4096,
// fallback: {
// loader: 'file-loader',
// options: {
// name: 'img/[name].[hash:8].[ext]'
// }
// }
// }
config.module.rule('images').use('url-loader').tap(options =>options)
2 url-loader
options 选项
limit
// 限制10kb
// 小于10kb转换为base64
options.limit = 1024 * 10
fallback
// 扩展
// 使用file-loader处理路径引用问题
options.fallback = {
loader: 'file-loader',
options: {
// 输出路径为 assetsDir 资源目录下
// img文件夹
name: 'img/[name].[hash:8].[ext]'
}
}
config配置
config.module
.rule('images')
.use('url-loader')
.tap(options => {
// console.log('url-loader', options)
return {
...options,
limit: 8192
}
})
3.注意
1.需使用images规则,否则无法获取默认的options
2.name须在fallback.options里配置
尾声
站在那里别动,我马上过去找你,乖乖听话哦~
晚安 ^_^
参考链接
往期回顾
- 每天学习一个vue插件(1)——better-scroll
- 每天学习一个vue插件(2)——vue-awesome-swiper
- 每天学习一个vue插件(3)——eslint + prettier + stylelint
- 每天学习一个vue插件(4)——v-viewer
- 每天学习一个vue插件(5)——postcss-pxtorem
- 每天学习一个vue插件(6)——momentjs
- 每天学习一个vue插件(7)——hammerjs
- 每天学习一个vue插件(8)——mcanvas
- 每天学习一个vue插件(9)——MathJax
- 每天学习一个vue插件(10)——Vue-APlayer
- 每天学习一个vue插件(11)——vue-drag-resize
- 每天学习一个vue插件(12)——vue-fullpage
- 每天学习一个vue插件(13)——html2canvas
- 每天学习一个vue插件(14)——vue-pull-to
- 每天学习一个vue插件(15)——vue-content-placeholders
- 每天学习一个vue插件(16)——vue-video-player
- 每天学习一个vue插件(17)——js-file-download
- 每天学习一个vue插件(18)——js-audio-recorder
- 每天学习一个vue插件(19)——vue-treeselect
- 每天学习一个vue插件(20)——progressbar
- 每天学习一个vue插件(21)——ProvidePlugin
- 每天学习一个vue插件(22)——vue-router