webpack打包优化

介绍

关于webpack打包优化我们使用的原因呢，首先我们上线一个项目，为了让用户有好的体验感，为了使我们的项目上线后有好的效果反应，首先考虑的就是这个项目的大小问题，为了是我们的项目大小进行压缩，这时候我们就要用到webpack打包优化

打包

1.我们首先要创建vue.config.js文件，将静态资源设置为"./"，,否则打包后项目无法运行，并且我们要关闭SourceMap映射文件，使其大小减少80%

module.exports = {
   
	publicPath: "./",
	productionSourceMap: false
}

跨域配置

module.exports = {
   
  devServer: {
   
   open: false, // 自动启动浏览器
   host: '0.0.0.0', // localhost
   port: 6060, // 端口号
   hotOnly: false, // 热更新

   overlay: {
   
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    proxy: {
   
      //配置跨域
      '/api': {
   
        target: 'https://www.test.com', // 接口的域名
        // ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
   
          '^/api': '/'
        }
      }
    }
  }
}

配置 alias 别名

目的是让我们的书写更加方便

//加载path模块
const path = require('path')
//定义resolve方法，把相对路径转换成绝对路径