devtool选项用于控制是否需要生成sourcemaps以及如何生成sourcemaps。源代码地址什么是sourcemap?sourcemap存放源代码和编译代码对应位置的映射信息文件。它是专门为调试器准备的。它主要用于调试。据我所知,只有GoogleDevTools和FireFoxDebugger支持源映射。GoogleDevTools可以通过以下方式打开JavaScriptsourcemap和CSSsourcemap:sourcemap主要用于将压缩混淆后的JavaScript代码和CSS代码映射到源代码中,方便调试。关于so??urcemap的更多知识可以参考阮一峰大神的文章:JavaScriptSourcemap详解最新的webpack官网devtool有13种可选模式,不同模式对输出代码和sourcemap进行打包和build速度不同。下面我将演示几种常用的devtool模式。eval的意思是把每个模块文件都转成一个字符串,在每个模块代码的最后加上//#sourceURL=webpack:///filename.js,用eval来执行。1.编写入口文件和依赖代码2.编写webpack配置&启动webpackconstwebpack=require('webpack');//创建编译器对象constcompiler=webpack({mode:'development',devtool:'eval'});//启动webpackcompiler.run((err,stats)=>{if(err){console.error(err);return;}//输出编译成功信息console.log(stats.toString({colors:true}));});webpack运行结果:打包输出main.js文件从打包后的main.js文件中,我们可以发现index.js文件和role.js文件的所有代码都已经转化为字符串,使用eval执行,添加//#sourceURL到代码末尾的原始文件位置,这种模式不会输出地图文件。浏览器运行结果:从浏览器的运行结果来看,左边多了一个webpack://。其实这是//#sourceURL设置值。如果我们在代码中修改这个名字,浏览器显示的是另一个名字,如果删除它,那么它的sourcemap就会消失。而且,它映射到的每一个源文件的头部都会加上一段webpack代码,这对我们来说并不友好。我很少使用这种模式。cheap-module-source-map没有列映射的源映射,加载器的源映射也将简化为每行一个映射。这种配置更适合在开发环境中使用,在react脚手架开发模式中也使用这种配置。1.安装css-loadernpmi-Dcss-loader2.修改webpack配置3.创建main.css文件body{background-color:greenyellow;color:red;}4.importmain.cssfromsrc/index.js5.运行webpacksource-mapsource-map适合生产环境使用。它会生成一个源码对应的.map文件,描述了打包后的代码与源码的映射关系。代码上线后,无法将此文件上传到线上服务器。可以上传到只能内网访问的服务器上,这样只要在公司内网环境下就可以轻松定位线上问题。1.修改devtoolsource-mapconstwebpack=require('webpack');//创建一个编译器对象constcompiler=webpack({mode:'development',devtool:'source-map'});//启动webpackcompiler。run((err,stats)=>{if(err){console.error(err);return;}//输出编译成功信息console.log(stats.toString({colors:true}));});运行webpack后可以看到dist文件夹下会有一个main.js.map文件,就是sourcemap源码映射文件2.上传main.js.map文件到内网服务器3.修改sourceMappingURL映射文件路径4.在浏览器中运行webpack打包的main.js文件与源码建立映射成功。如果我此时关闭内网服务器,会发生什么?可以发现,如果内网服务器关闭,GoogleDevTools找不到main.js.map映射文件。这时候浏览器会没有源码映射,但是也不会报错。nosources-source-mapnosources-source-map会生成一个没有源代码的sourcemap,只能用于在浏览器上映射stacktrace,而不暴露源代码。这个配置选项也非常适合生产环境。比如:如果你线上环境的代码有问题,报错信息可以告诉我问题发生在文件的哪一行,但是我不想暴露我的源代码,所以可以使用这种模式.第一步:将devtool改成nosources-source-map第二步:role.js文件报错第三步:浏览运行从运行结果可以发现报错信息详细描述了哪个源码文件是我的前几行报错,但是浏览器看不到任何源代码。错误演示:不能同时设置devtool和SourceMapDevToolPlugin。同时设置devtool和SourceMapDevToolPlugin。运行webpack:打开打包好的main.js文件,可以看到同时设置了两个sourceMappingURL:这样会导致sourcemap映射失败:如果只设置了devtool或者SourceMapDevToolPlugin其中之一,那么sourcemap就可以运行通常情况下。总结您可以使用SourceMapDevToolPlugin插件进行更细粒度的配置。使用source-map-loader处理已有的sourcemaps。??注意:devtool默认值为false。如果输入的不是webpack的可选参数或者false,会导致webpack运行时出错。devtool选项需要将source-map文件发布到内网服务器,这样sourcemap只有开发者才能看到,外网的人是看不到的。nosources-source-map:生产环境使用,这个option只有stackmapping和tracking,不会暴露源码,便于定位错误。优点是:不需要在内网建立和部署sourcemap服务器,缺点是:不能直接在线调试源码。cheap-module-source-map:用于开发环境这是官网所有devtools的配置说明。有兴趣的同学可以尝试每一个选项。
