学习目标:webpack一些常用的打包方法和怎么重写vue中的push和replace方法
学习内容:webpack
- html-webpack-plugin的使用
- 清理dist
//在出口文件加上这个,再次使用npx webpack打包时,原来的html文件就会被替换
clean:true
1.使用source map精准定位错误的代码
//在开发模式下追踪代码
devtool:'inline-source-map',
2.资源模块(允许webpack打包其他的资源文件)
(1)asset/resource(会发送一个单独的文件并导出url)
module:{
rules:[
{
test: /\.jpg$/,
//加载图片资源
type:'asset/resource',
//优先级较高
generator:{
filename:'images/[contenthash][ext]'
}
}
]
}
(2)asset/inline(他会导出一个资源的Data URL)
module:{
rules:[
{
test:/\.svg$/,
type:'asset/inline'
},
]
}
(3)asset/source(导出资源的原代码)
module:{
rules:[
{
test:/\.txt$/,
type:'asset/source'
},
]
}
(4)asset/source(在resource和inline之间自动选择)
module:{
rules:[
{
test:/\.jpg$/,
type:'asset',
parser:{
dataUrlCondtion:{
//当图片大于4m时才会生成一个资源文件
maxSize:4*1024*1024
}
}
},
]
}
3.重写router里的push和replace方法
// //先把VueRouter原型对象的push,先保存一份
let oringinPush= VueRouter.prototype.push;
let oringinReplace = VueRouter.prototype.replace;
// //重写push和replace
// //第一个参数:告诉原来的push方法,你往哪里跳转(传递哪些参数)
Vue.prototype.push = function(location,resolve,reject){
if(resolve && reject){
oringinPush.call(this,location,resolve,reject);
}else{
oringinPush.call(this,location,()=>{},()=>{})
}
}
//location是往哪里跳
Vue.prototype.replace = function(location,resolve,reject){
if(resolve && reject){
oringinReplace.call(this,location,resolve,reject);
}else{
oringinReplace.call(this,location,()=>{},()=>{})
}
}