为什么有时候需要配置devtool

    devtool配置选项是用来控制是否生成source map，以及如何生成source map
    什么是source map

    它是一个储存源代码和打包代码映射关系信息的文件，专门用于调试和debug
    source map作用

    因为sourceMap是一个映射关系，所以可以把打包后出错的代码位置和源代码对应的代码位置对应，这样我们可以很快定位错误
    webpack4关于devtool的默认配置

    mode:development的时候,默认值devtool:eval
    mode:production的时候devtool:none是默认关闭的，报错直接指到打包后的压缩文件，没有具体的提示，之所以生产环境下关闭devtool（因为source map的文件一般较大，不仅会导致额外的网络传输，还容易暴露原始代码）

    devtool:’source-map’

    打包后的文件多一个main_xxxxx.js.map映射文件，并且在main_xxxx.js中以sourceMappingURL=main_xxxxx.js.map引入

    devtool:’inline-source-map’

    inline-使打包后，没有main_xxxxx.js.map映射文件，而是main_xxx.js.map映射文件以base64的字符串被放到打包的main_xxxx.js的底部

    devtool:’cheap-inline-source-map’

    cheap-前缀可以提升打包性能，使打包的报错只定位到行，而不是哪一行的哪一个字符
    cheap-只管业务代码，不会管引入的第三方模块或者库错误
    devtool:’cheap-module-inline-source-map’

    module-既管业务代码，也会管引入的第三方模块或者库错误
    devtool:’eval’

    eval打包速度最快，性能最好，但是代码复杂不适合用，打包出来既然没有map文件，也没有base64的字符串
    每一个模块文件都转换为字符串，并且在每一个模块代码的尾部添加 //# sourceURL=webpack:///文件名.js，并使用eval执行。

    devtool: “nosources-source-map”

    这个配置也会生成一个map文件，也在main.js中以//# sourceMappingURL=main.js.map引入，但是不会暴露源码

    当你不想暴露自己的源码。但是又想知道代码出错在哪个文件的哪行的时候可以使用这个配置
    devtool:’cheap-module-eval-source-map’

    mode是development推荐使用cheap-module-eval-source-map
    devtool:’cheap-module-source-map’

    mode是production时候推荐使用cheap-module-source-map
    总结：

    mode是development推荐使用cheap-module-eval-source-map

    mode是production时候推荐使用cheap-module-source-map

    原因如下：

    使用 cheap模式可以大幅提高 souremap生成的效率。大部分情况我们调试并不关心列信息，而且就算 sourcemap没有列，有些浏览器引擎（例如 v8） 也会给出列信息。
    使用 eval 方式可大幅提高持续构建效率。参考官方文档提供的速度对比表格可以看到 eval模式的编译速度很快。
    使用 module可支持 babel 这种预编译工具（在 webpack里做为 loader使用）。
    使用 eval-source-map 模式可以减少网络请求。这种模式开启 DataUrl本身包含完整 sourcemap信息，并不需要像 sourceURL那样，浏览器需要发送一个完整请求去获取 sourcemap文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得极大。

    以上只是简单地介绍了几个常用的配置，你可以根据项目需要简单组合使用，如果需要看详细的配置可以去