一、source-map是什么

一种提供源代码到构建后的映射技术（如果构建代码出错了，通过映射关系，可以追踪到源代码错误）

二、source-map都有什么

[inline-|hidden-|eval][nosources-][cheap-[module-]]source-map

• source-map：外部
  错误代码准确信息，源代码错误位置
• inline-source-map：内联
  错误代码准确信息，源代码错误位置，但是会额外增加代码大小
• hidden-source-map：外部
  错误代码原因，但是没有准确位置。不能追踪到源代码错误，只能提示到构建后代码位置
• eval-source-map：内联（每一个文件都生成source-map）
  错误代码准确信息和源代码错误位置
• nosources-source-map：外部
  错误代码准确信息，但是没有任何源代码信息
• cheap-source-map：外部
  错误代码准确信息和位置，只能精确到行。
• cheap-module-source-map：外部
  错误代码准确信息和位置，只能精确到行。module会将loader和source map加入

三、内联和外部的区别

外部会生成文件，内联不会生成文件。内联的构建速度更快。

四、source-map的选择

1. 开发环境：速度快，调试友好
   • 速度快：eval>inline>cheap
     eval-cheap-source-map
     eval-source-map
     
   • 调试友好
     source-map
     cheap-module-source-map
     cheap-source-map
     开发环境一般选择：eval-source-map/eval-cheap-module-source-map
2. 生产环境：源代码要不要隐藏，调试有不友好 内联体积会非常大，所以不用内联。
   • nosources-source-map：全部隐藏
   • hidden-source-map:只会隐藏源代码，会提示构建后代码错误信息
   • source-map / cheap-module-source-map

五、source-map的使用

新增devtool: 'source-map'

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:['./src/js/index.js','./src/index.html'],
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[

        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development',
    devServer: {
        // 项目构建后路径
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
        //开启HMR功能
        //当修改了webpack配置，重启webpack服务
        hot:true,
    },
    devtool:'eval-source-map'//source-map
}