webpack打包优化

webpack打包作用

1. 提高打包速度
2. 减小项目体积、提高首屏加载速度
3. 提高用户体验（骨架屏）

webpack打包操作主要在项目开始时、项目结束后（打包前）两个阶段进行

项目开始时：

1. 配置proxy跨域
2. 配置alias别名

一、配置proxy跨域

module.exports = {
  publicPath: "./",
  devServer: {
    open: true,// 自动启动浏览器
    proxy: {
      "/api": {
        target: "http://47.115.85.237:3000/", // 线上后端地址
        changeOrigin: true, //允许跨域
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};
// proxy是代理的意思
// 代理跨域就是在欺骗浏览器 让浏览器认为你访问的还是 同源的localhost：8080 ，但是用代理把地址代理到了需要跨域的地址去了

// 首先第一步把vue.config.js放在项目的根目录下
// 然后重启项目
// 在这里代理的关键字是/api，也就是在之后请求的时候 在路径前拼接/api
// 如果用http 必须要把baseurl删除

二、配置alias别名

在vue项目开发中，组件化开发是我们不得不经常引用组件或插件，一些路径被频繁使用，为了简化代码ÿ