「这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战」
前面我们打包出来的 bundle.js 文件是被压缩过的，而且是在一行上，那么如果我们项目中的某个地方代码出现了错误，浏览器控制台中显示的错误位置就是这个 bundle.js 文件的第 1 行，无法将错误确切定位到项目中的具体文件的具体位置。
比如我们在 ./src/js/element.js 文件最后添加一行到时候会报错的代码：
console.log(content.length);
上述代码中的 content 变量从未被定义过，因此打印未定义过的变量的 length 属性的值到时候在浏览器控制台中一定会报错。我们打包后到浏览器控制台中查看效果：
可以看到，错误信息只告诉我们该错误发生在 bundle.js 文件的第 1 行，而如果你点进去就会发现，里面的所有代码都在同一行上，很难确定（特别是在代码量较多时）该错误具体发生在项目中的哪个文件的哪一行，而且这些代码都是被压缩过的，即使来到 bundle.js 文件中查看也很难阅读。
我们首先来解决代码被压缩后很难看懂的问题，我们打开 webpack.config.js 文件，配置 mode 选项：
...
module.exports = {
mode: 'development', // 将模式设置为开发模式
...
}
然后再来打包，首先你会发现之前打包时一直存在的警告信息没有了：
| 未配置 mode 时，之前打包时一直存在的警告信息 |
| 配置 mode 后，打包不再出现警告信息 |
其次，打包完成后再来打开 bundle.js 文件，你会发现里面的代码就没有再被压缩了（不过，里面还有很多 eval 函数，对源代码进行了包裹）。但是，这些代码虽然没有被压缩了，但由于使用的是 eval() 函数，我们还是看不太懂，如果我们想以高质量的源代码的形式打包出 bundle.js，就可以再来配置 devtool 选项（配置开发时的工具）：
...
module.exports = {
mode: 'development', // 将模式设置为开发模式（通常，在开发阶段，设置为 development；在准备打包上线的时候，设置为 production）
devtool: 'source-map' // 将 devtool 设置为 source-map，以建立 js 映射文件，方便调试代码和定位错误（devtool 在 development 模式下默认值是 eval，所以之前打包出来的 bundle.js 文件中有很多 eval() 函数）
...
}
devtool可以设置的值有很多，具体可以查看官方文档：webpack.js.org/configurati…
这里我们将 devtool 的值设置为了 source-map，这是我们第二次提到 source-map，第一次提到是在我们下载了 Vue3 的源代码后进行调试时：
通过设置 source-map，可以在生成对应的源代码时，也生成对应的 .map 文件（映射文件）。设置完 source-map 后，我们再来打包：
你会发现，除了 bundle.js 文件，还会生成一个 bundle.js.map 文件，如果打开这个 .map 文件，对里面的代码进行格式化后你会发现，里面的格式和我们之前讲 Vue 源码调试时生成的那个 .map 文件中内容的格式是差不多的，这个文件其实就是一个映射文件，可以把打包出来的源代码映射到项目中真实的源代码中，有这个映射的好处是什么呢？我们这时再来看浏览器控制台中的报错：
你会发现，现在错误已经精确定位到了项目中具体文件的具体行数了，即可以直接定位到我们实际编写的代码的某个位置，之后就可以直接去那边进行修改了。
事实上，
mode选项的是对一堆选项的配置（以下截图来自webpack4的官方文档：v4.webpack.js.org/configurati… ）：
更多内容可以查阅官方文档：webpack.js.org/configurati…
最后，再来对 mode 选项做个总结：
mode选项可以告知webpack使用相应模式的内置优化；- 默认值是
production； - 可选值有：
'none'、'development'、'production'；
这三个选项的区别如下：
以上，就是 Webpack 中对 mode 和 devtool 的配置说明。
