webpack@4.32.2研究笔记【03】- devtool

wangtdgoodluck 发布于2019-08-23 18:01 / 2009人阅读

摘要：简介选项用于控制是否需要生成，以及如何生成。表示把每一个模块文件都转换为字符串，并且在每一个模块代码的尾部添加文件名，并使用执行。通过来处理已有的。优点是不需要建立和部署内网的服务器，缺点是无法直接线上源码。

简介

devtool选项用于控制是否需要生成source map，以及如何生成source map。源码地址

什么是source map？

source map 一个存储源代码与编译代码对应位置的映射信息文件，它是专门给调试器准备的，它主要用于debug，目前我所知的只有Google Dev Tools 和 Fire Fox Debugger 支持source map。

Google Dev Tools 可以通过以下方式打开JavaScript的source map 和 CSS的source map：

source map主要用于将压缩混淆后的JavaScript代码和CSS代码映射到源码中，方便debug调试。更多关于source map的知识，大家可以参考阮一峰大神的文章：JavaScript Source Map 详解

演示

最新的webpack官网中一共有13种devtool可选模式，不同的模式打包输出的代码和source map以及构建的速度都不一样，下面我演示几种比较常用的devtool模式。

eval

表示把每一个模块文件都转换为字符串，并且在每一个模块代码的尾部添加 //# sourceURL=webpack:/// 文件名.js，并使用eval执行。

1、编写入口文件和依赖代码

2、编写webpack配置 & 启动webpack

const webpack = require("webpack");

// 创建编译器对象
const compiler = webpack({
  mode: "development",
  devtool: "eval"
});

// 启动webpack
compiler.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 指向原始文件的位置，这种模式并不会输出map文件。

浏览器运行结果：

从浏览器的运行结果中，左侧多了一个webpack://，其实这个就是//# sourceURL设置值，如果我们在代码中修改了这个名字，那么浏览器就会显示的是另外一个名字，如果删除它，那么它的源码映射就会消失。而且它映射到的每一个源文件的头部都会加上一段webpack的代码，这对于我们来说并不友好，这种模式我使用的频率相当少。

cheap-module-source-map

没有列映射的source map，同时loader的source map也会被简化为每行一个映射，这个配置比较适合在开发环境使用，react脚手架开发模式下也是使用这个配置。

1、安装css-loader

npm i -D css-loader

2、修改webpack配置

3、创建main.css文件

body {
    background-color: greenyellow;
    color: red;
}

4、src/index.js导入main.css

5、运行webpack

source-map

source-map 适合在生产环境中使用，它会生成一个源代码对应的.map文件，这个文件描述的打包后的代码和源代码的映射关系。代码上线时不能把这个文件上传到线上服务器，可以把它上传到一个只可以内网访问服务器上，这样只要你是在公司内网环境内就可以很方便的进行线上问题定位。

1、将devtool修改source-map

const webpack = require("webpack");

// 创建编译器对象
const compiler = webpack({
  mode: "development",
  devtool: "source-map"
});

// 启动webpack
compiler.run((err, stats) => {
  if (err) {
    console.error(err);
    return;
  }
  // 输出编译成功信息
  console.log(stats.toString({ colors: true }));
});

运行webpack后，可以看到dist文件夹下会多出一个main.js.map文件，这个就是source map源码映射文件

2、将main.js.map文件上传到内网服务器

3、修改sourceMappingURL映射文件的路径

4、在浏览器中运行webpack打包出来的main.js文件

已经成功的跟源码建立了映射，如果此时我把内网的服务器关掉，看看会发生什么事情？

可以发现如果内网服务器关闭了，Google Dev Tools就找不到main.js.map映射文件了，此时浏览器就没有源码映射了，但是也不会报错。

nosources-source-map

nosources-source-map会生成一个没有源码的source map映射，仅仅可以用来映射浏览器上的堆栈跟踪，而不会暴露源码，这配置选项也很适用生产环境。例如：当你线上环境的代码如果出问题了，报错信息能够告诉我是在哪个文件的哪一行出现问题了，但是我又不想把我的源码暴露出去，就可以使用这种模式。

第一步：将devtool修改为nosources-source-map

第二步：在role.js文件里制作一个错误

第三步：浏览运行

从运行结果可以发现，报错信息详细的描述了是我哪个源码文件的第几行报错了，但是浏览器却看不到任何的源码。

错误示范：不能同时设置devtool和SourceMapDevToolPlugin

同时设置devtool和SourceMapDevToolPlugin插件

运行webpack：

打开打包出来的main.js文件，可以看到会同时设置了两个sourceMappingURL：

这样会导致source map映射失效：

如果只设置devtool或者SourceMapDevToolPlugin其中的一个，那么source map就可以正常运行了。

总结

可以使用 SourceMapDevToolPlugin 插件进行更细粒度的配置。通过 source-map-loader 来处理已有的 source map。

⚠️注意：devtool的默认值为false，如果传入的不是webpack的可选参数或者false会导致webpack运行报错

source-map：在生产环境使用，但是必须需要使用SourceMapDevToolPlugin插件进行设置，并且不能使用devtool选项，需要把source-map文件发布一台内网服务器，这样只有开发人员能够看到源码映射，外网的人是无法看到的。

nosources-source-map：在生产环境使用，这个选项只有堆栈的映射跟踪，不会暴露源码，方便错误定位。优点是：不需要建立和部署内网的source map服务器，缺点是：无法直接线上debug源码。

cheap-module-source-map：在开发环境使用

这是官网上所有devtool的配置说明，感兴趣的同学可以对每个选项进行尝试。

GPU云服务器云服务器 devtool DevTools Chrome DevTools 服务器03还是08

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104542.html

webpack@4.32.2研究笔记【01】- 零配置

摘要：核心概念是一个前端资源模块打包工具，它可以根据模块的依赖关系进行打包输出成浏览器能够识别的静态资源，可以把多个文件打包成一个，减少请求。源码地址零配置启动从开始，可以零配置启动，命令被迁移到一个单独的包上，的功能变得更加丰富强大。核心概念 webpack是一个前端资源模块打包工具，它可以根据模块的依赖关系进行打包输出成浏览器能够识别的静态资源，可以把多个文件打包成一...

littleGrow 2019-08-26 13:56 评论0 收藏0
webpack@4.32.2研究笔记【02】- mode

摘要：简介模式是新增的配置，用来指定使用对应模式的内置优化它有三个可选模式默认为。源码地址选项描述通过插件将的值设为。启用和通过插件将的值设为。使用默认的优化项。注意上面说的并不是的运行环境变量，它其实是通过插件设置的一个全局变量。简介 mode（模式）是webpack4.0.0新增的配置，用来指定webpack使用对应模式的内置优化；它有三个可选模式：producti...

newtrek 2019-08-23 17:51 评论0 收藏0
spring boot学习(6)— 配置信息及其读取优先级

摘要：优先级如下使用文件使用文件，会根据以下目录去寻找，添加到中，优先级依次递增。目录下目录工程根目录工程跟目录下的目录加载顺序从优先级高的先加载。属性值怎么取优先级高的会覆盖优先级低的。但是在同等目录下，优先级高于文件的配置信息。 1. properties 信息从哪里取在不同的环境，我们需要使用不同的配置，Spring boot 已经提供了相关功能，可以是 properties 文件，...

stormzhang 2019-08-16 16:15 评论0 收藏0
有哪些 JS 调试技巧——devtool，以及安装问题的解决

摘要：试试年年初出的调试神器基于将和的功能融合在了一起。直接命令行下启动，替代命令和在下没有交互的。解决方法在最下面。小技巧另外启动调试可以用这样可以监听文件变化自动，以及在文件开头自动以便打断点调试。转自本人知乎回答作者：mdluo链接：https://www.zhihu.com/question/20260762/answer/89388634来源：知乎著作权归作者所有。商业转载请联...

gaomysion 2019-08-19 18:47 评论0 收藏0