1. 关于Mode配置

Mode配置选项，告知webpack使用响应模式的内置优化：

• 默认值是production（什么都不设置的情况下）；
• 可选值：'none' | 'development' | 'production'；

2. 认识source-map

代码通常运行在浏览器上时，是通过打包压缩的

• 真实跑在浏览器上的代码，和我们编写的代码其实是有差异的；
• 如ES6的代码可能被转换成ES5；
• 如对应的代码行号、列号在经过编译后肯定会不一致；
• 如代码进行丑化压缩时，会将编码名称等修改；
• 如使用了TypeScript等方式编写的代码，最终转换成JavaScript；

当代码报错需要调试时（debug），调试转换后的代码是很困难的

这时就需要source-map：source-map是从已转换的代码，映射到原始的源文件；

使浏览器可以重构原始源并在调试器中显示重建的原始源

配置sourec-map的方式：

通过配置devtool: "根据需求配置相应模式"

①根据源文件，生成source-map文件，webpack在打包时，可以通过配置生成source-map；

②在转换后的代码，最后添加一个注释，它指向sourcemap ；

//# sourceMappingURL=common.bundle.js.map 

3. 配置source-map

如何在使用webpack打包的时候，生成对应的source-map

webpack为我们提供了非常多的选项（目前是26个），来处理source-map，选择不同的值，生成的source-map会稍微有差异，打包的过程也会有性能的差异，可以根据不同的情况进行选择；

下面几个值不会生成source-map

• false：不使用source-map，也就是没有任何和source-map相关的内容；
• none：production模式下的默认值，不生成source-map；
• eval：development模式下的默认值，不生成source-map ；
  • 但是它会在eval执行的代码中，添加 //# sourceURL=；
  • 它会被浏览器在执行时解析，并且在调试面板中生成对应的一些文件目录，方便我们调试代码；

4. source-map值

 source-map：

会生成一个独立的source-map文件，并且在bundle文件中有一个注释，指向source-map文件；

bundle文件中有如下的注释：

开发工具会根据这个注释找到source-map文件，并且解析；

//# sourceMappingURL=bundle.js.map

eval-source-map：

eval-source-map：会生成sourcemap，但是source-map是以DataUrl添加到eval函数的后面

inline-source-map：

inline-source-map：会生成sourcemap，但是source-map是以DataUrl添加到bundle文件的后面

cheap-source-map：

会生成sourcemap，但是会更加高效一些（cheap低开销），因为它没有生成列映射（Column Mapping）即在开发调试错误时，无法精确到错误的列，只精确到行。

cheap-module-source-map ：

会生成sourcemap，类似于cheap-source-map，但是对源自loader的sourcemap处理会更好；

对源自loader的sourcemap处理会更好，官方也没有给出很好的解释 其实是如果loader对我们的源码进行了特殊的处理，比如babel；

hidden-source-ma：

• 会生成sourcemap，但是不会对source-map文件进行引用；
• 相当于删除了打包文件中对sourcemap的引用注释；

nosources-source-map ：

会生成sourcemap，但是生成的sourcemap只有错误信息的提示，不会生成源代码文件；

5. 多个值的组合

webpack提供的26个值，是可以进行多组合的；

组合的规则如下：

• inline-|hidden-|eval：三个值时三选一；
• nosources：可选值；
• cheap可选值，并且可以跟随module的值；

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

开发中最佳的实践

开发阶段 :

推荐使用 source-map或者cheap-module-source-map ,分别是vue和react使用的值，可以获取调试信息，方便快速开发；

测试阶段：

推荐使用 source-map或者cheap-module-source-map ，测试阶段我们也希望在浏览器下看到正确的错误提示；

发布阶段：false、缺省值（不写） ；