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’)
]
}
}
项目运行
export default { }
// 使用样式，这里将不需要单个页面导入了，直接使用即可
.content {
margin-top: 50px;
color: @dzm-color;
}
Vue 配置全局样式（style-resources-loader） - 掘金 (juejin.cn)
关于file-loader的使用
作用file-loader 可以用来帮助webpack打包处理一系列的图片文件；比如：png,.jpg,jepg等格式的图片
