webpack4【guides说明5】

你如果动手自己试验了的话，你肯定会发现，每次自己更新index.js文件的时候，都需要自己手动在命令行输入打包命令，那么有没有办法解决这个问题呢，同样webpack也提供了解决方案。

现在我们来看一下webpack的开发配置。

 

首先是讲mode设置为development，这个选项如前文所见，会影响打包文件是否丑化处理的。

 

1.使用sourceMap

当使用webpack打包你的代码的时候，那么发现问题后，如何追踪错误到源码位置是很困难的。比如说。你有a.js,b.js,c.js，并打包进了bundle.js文件中，其中一个源文件里面包含了一个错误，那么运行打包后的代码时，相关错误提示只会仅仅指向到打包后的文件，bundle.js去。这通常对你了解错误从何而来是没有帮助的。

为了让追踪错误，以及警告轻松点，js提供了source map方案，这会将编译后的代码追溯到相关源代码处。那么如果一个错误从b.js文件产生，source map将会明确为你指出错误来源于b.js文件。当说到webpack source map时，有许多配置项目可以使用，通过查阅，选择合适自己项目的一种。

 

简单处理，我们这里就是用了inline-source-map选项，（生成环境不建议使用）

加入devtool字段，到根对象下。