2019-07-05

一、sourceMap

sourceMap是一个映射关系，他知道dist目录下dist.js文件96行出错

实际对应src目录下的index.js文件下的第一行

不使用sourceMap 控制台指明报错文件是打包后的dist.js文件 sourceMap在devtool里配置 控制台指明报错文件是被打包的index.js文件  

*配置source-map其实就是配置devtool，配置devtool会导致打包变慢

eval： 生成代码 每个模块都被eval执行，并且存在@sourceURL

cheap-eval-source-map： 转换代码（行内） 每个模块被eval执行，并且sourcemap作为eval的一个dataurl

cheap-module-eval-source-map： 原始代码（只有行内） 同样道理，但是更高的质量和更低的性能

eval-source-map： 原始代码 同样道理，但是最高的质量和最低的性能

cheap-source-map： 转换代码（行内） 生成的sourcemap没有列映射，从loaders生成的sourcemap没有被使用

cheap-module-source-map： 原始代码（只有行内） 与上面一样除了每行特点的从loader中进行映射

source-map： 原始代码 最好的sourcemap质量有完整的结果，但是会很慢

*建议使用cheap-module-eval-source-map：提示全，打包快

*若是生产环境

devtool: 'cheap-module-source-map'

二、devServer

webpack.config.js package.json

1、与webpack --watch和webpack不同的是，webpack-dev-ser会开启一个web服务器，页面无需刷新即可更新，默认为http://localhost:8000，而webpack是以文件流(file)的形式打开，无法进行ajax通信，因为ajax必须在http协议上才可进行

2、devServer.proxy: 接口代理

proxy:{"/api":"http://localhost:3000"}