webpack4322系列教程03-devtool

简介

​ 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 映射文件了，此时浏览器就没有源码映射了，但是也不会报错。

总结

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

​ source-map：在生产环境使用

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

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