在配置devtool时,webpack给我们提供了四种选项。
- source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度;
- cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便。
- eval-source-map:使用eval打包源文件模块,在同一个文件中生产干净的完整版的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定要不开启这个选项。
- cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法,生产的 Source map 会和打包后的JavaScript文件同行显示,没有影射列,和eval-source-map选项具有相似的缺点。
四种打包模式,有上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的打包速度的后果就是对执行和调试有一定的影响。
个人意见是,如果大型项目可以使用source-map,如果是中小型项目使用eval-source-map就完全可以应对,需要强调说明的是,source map只适用于开发阶段,上线前记得修改这些调试设置。
1.简单的配置下:
devtool:'eval-source-map'
1> webpack快速入门——如何安装webpack及注意事项
2> webpack快速入门——webpack3.X 快速上手一个Demo
3> webpack快速入门——配置文件:入口和出口,多入口、多出口配置
7> webpack快速入门——插件配置:HTML文件的发布
11> webpack快速入门——CSS进阶,Less文件的打包和分离
12> webpack快速入门——CSS进阶:SASS文件的打包和分离
13> webpack快速入门——CSS进阶:自动处理CSS3前缀
14> webpack快速入门——CSS进阶:消除未使用的CSS
15> webpack快速入门——给webpack增加babel支持
17> webpack快速入门——实战技巧:开发和生产并行设置
18> webpack快速入门——实战技巧:webpack模块化配置
19> webpack快速入门——实战技巧:优雅打包第三方类库
20> webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包