携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情
如何配置 mode 选项
在项目，我们打包项目的时候，总是出现这也警告信息：'mode' option has not been set，没有设置 mode 选项。
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
在 webpack.config.js 配置文件设置 mode 选项，将 mode 设置为 development。
//...
module.exports = {
//...
mode:'development'
}
执行 npx webpack 命令，重新打包项目，发现没有出现 “'mode' option has not been set”警告信息。
使用 source map 进行代码的调试
不知道大家有没有发现，在生成 bundle.js 文件中，代码非常凌乱。同时，如何我们在编写代码时，个人原因把某个关键字写错误了，在使用 Webpack 打包的过程又没有给我们提示错误信息。
比如，我们将项目中两个源文件 hello.js 和 index.js 打包到一个 bundle（ bundle.js ）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向到 bundle.js 。你可能需要准确地知道错误来自于哪个源文件，所以这种提示这通常不会提供太多帮助。
比如，我们将项目中 /src/hello.js 文件中的 console 错误写成 cnsole。
function hello(){
// console 书写错误
cnsole.log("Hello React！")
}
export default hello
但是在使用 Webpack 命令进行打包时，能过正常进行打包。
我们试图通过浏览器来帮助检查程序的错误信息。可以看到浏览器控制台输出“cnsole is not defined”错误信息，告诉我们 cnsole 没有定义，并且告诉我们错误发生在什么位置。
但是，这具体错误代码的信息并不是源文件代码的信息。
为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps 功能，可以将编译后的代码映射回原始源代码。如果一个错误来自于 hello.js ，source map 就会明确的告诉你。
我们通过这种方式精准的锁定到我们出错的代码的位置，需要在 webpack.config.js 文件中配置 devtool。
// webpack.config.js
//...
module.exports = {
//...
devtool:'inline-source-map'
}
执行 Webpack 打包命令，回到浏览器刷新，在控制台查看显示的错误。
在浏览器里点击 hello.js:3，查看具体错误。
这样，我们就可以精准的定位到具体源代码错误位置。
