webpack之source-map、devServer

1、source-map

作为一个开发人员，都要求我们开发环境中都有一个不可或缺的功能，就是 debugger；

模式

解释

eval

每个module会封装到eval里包裹起来执行，并且在末尾追加注释//@sourceURL

source-map

生成一个SourceMap文件

hidden-source-map

和source-map一样，但不会在bundle末尾追加注释

inline-source-map

生成一个DataUrl形式的SourceMap文件

eval-source-map

每个Module会通过eavl()来执行，并且生成一个DataUrl形式的SourceMap

cheap-source-map

生成一个没有列信息的SourceMap文件，不包含loader的sourcemap(譬如babel的sourcemap)

cheap-module-source-map

生成一个没有列信息的SourceMaps文件，同时loader的sourcemap也被简化为只包含对应行为的。

要注意的是，生产环境我们一般不会用其sourcemap功能，主要有两点原因：

通过bundle和sourcemap文件，可以反编译出源码，也就是说：线上产物有sourcemap文件的话，就意味着有暴露源码的风险；

我们可以观察到，sourcemap文件的体积相对比较巨大，这跟我们生产环境的追求不同（生产环境追求更小更轻量的bundle）

在实际的开发中推荐使用：cheap-module-source-map；在开发环境中不会配置 devtool

2、devServer

（1）在代码中的配置

const path = require('path');//进入Node.js内置的模块path
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 mode:'development',
 entry:'./app.js',
 devServer: {
  static: path.resolve(_dirname, './dist'),
  compress: true//这个选项可以设置我们是不是在服务器端进行代码压缩，使它在传输的过程中可以减少传输的文件数据的大小
  port:3000//主要用来配置服务的端口号
  headers: {
   'X-Access-Token':’abs23‘//可以把一个token信息传给浏览器
  }，
  proxy: {
   '/api': 'http://loaclhost:9000',
  },
   https: true,
   historyApiFallback: true,
   host:'0.0.0.0'
 },
 
 plugins:[
 new HtmlWebpackPlugin()
 ]
}

（2）模拟添加响应头

有些场景需求下，我们需要为所有响应添加headers，来对资源的请求和响应打入标志，以便做一些安全防范，或者方便发生异常后做请求的链接跟踪

（3）开启代理

（4）https

如果想让在本地http服务变成https服务，我们只需要这样配置：

devServer: {
 https: true
}

注意：此时访问http://localhost:port是无法访问我们的服务的，我们需要在地址栏里加前缀：https；注意：由于默认配置使用的是自签名证书，所以有得浏览器会告诉你是不安全的，但我们依然可以继续访问它，当然我们可以提供自己的证书（如果有的话）

devServer: {
 https: {
  cacert:'./server.pem',
  pfx:'./server.pfx',
  cert:'./server.crt',
  passphrse:'webpack-dev-server',
  requestCert: true,
 }
}

（5）http2

如果想要配置http2,那么直接设置：

devServer: {
 http2: true
}

http2默认自带自签名证书，当然仍然可以通过https配置项来使用自己的证书

（6）historyApiFallback

如果我们的应用是一个SPA（单页面应用），当路由到/some时（可以直接在地址栏里输入），会发现此时刷新页面后，控制台会报错

devServer: {
 historyApiFallback: true
}

（7）开发服务器主机

如果你在开发环境中起了一个devserve服务，并期望你的同事能访问到它，你只需要配置：

module.exports = {
 devServer: {
 host:'0.0.0.0'
 }
}

这个时候，如果你的同事跟你处于同一局域网下，就可以通过局域网api来访问你的服务器啦