webpack中的重要设置

# Vue-cli proxyTable 解决开发环境的跨域问题

参考链接：https://vuejs-templates.github.io/webpack/proxy.html

假如要请求api.xxxxxxxx.com/list/1地址，可以这样书写：

proxyTable: {
      // proxy all requests starting with /list to jsonplaceholder
  '/list': {
    target: 'http://api.xxxxxxxx.com',        //后端IP地址
    changeOrigin: true,        //设置跨域，一定要
    pathRewrite: {            //路径重写
      '^/list': '/list'        //以list开头的请求
    }
  }
}

changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。

 

路径重写有两种情况: 

      '^/list': '/list'    

此时，在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.

      '^/list': ''    

此时，url需要写成 /list/list/1才表示为api.xxxxxxxx.com/list/1.

# devtool 配置构建生产环境特性：

开发环境推荐：
cheap-module-eval-source-map
生产环境推荐：
cheap-module-source-map

相关解释：

• 大部分情况我们调试并不关心列信息，而且就算 sourcemap 没有列，有些浏览器引擎（例如 v8） 也会给出列信息，所以我们使用 cheap 模式可以大幅提高 souremap 生成的效率。
• 使用 module 可支持 babel 这种预编译工具（在 webpack 里做为 loader 使用）。
• 使用 eval 方式可大幅提高持续构建效率，参考webapck devtool速度对比列表，这对经常需要边改边调的前端开发而言非常重要

直接将sourceMap放入打包后的文件，会明显增大文件的大小，不利于静态文件的快速加载；而外联.map时，.map文件只会在F12开启时进行下载（sourceMap主要服务于调试），故推荐使用外联.map的形式。