7月7日学习打卡

学习目标：webpack一些常用的打包方法和怎么重写vue中的push和replace方法

---

学习内容：webpack

1. html-webpack-plugin的使用

1. 清理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,()=>{},()=>{})
    }
}