webpack基础(八) webpack 打包优化

sourcemap

sourcemap表示是否生成和源码相对应的代码。这个在开发阶段能够很好的帮助我们定位错误。配置如下

   devtool:"source-map",

devtool 用于很多值，而且值和值之间可以组合

• eval:速度最快,使⽤eval包裹模块代码,
• source-map： 产⽣ .map ⽂件
• cheap:较快，不包含列信息
• Module：第三⽅模块，包含loader的sourcemap（⽐如jsx to js ，babel的sourcemap）
• inline： 将 .map 作为DataURI嵌⼊，不单独⽣成 .map ⽂件
  配置推荐：

devtool:"cheap-module-eval-source-map",// 开发环境配置
//线上不推荐开启
devtool:"cheap-module-source-map", // 线上⽣成配置

devServer

devServer用于众多的属性可以配置，常用的属性如下

• contentBase: 打开文件的位置
• open：运行结束是否自动打开浏览器
• port: 运行的端口
• proxy: 设置代理
  实例配置如下

 devServer: {
    contentBase: "./dist",
    port: 8081,
    open: true,
    proxy: {
      "/api": {
        target: "http://localhost:9092/", //表示/api开头的请求都会被http://localhost:9092/代理转发，解决开发跨域问题
      },
    },
  },