5-source-MAP 源码映射

关于配置 source-map

源码映射 会单独生成 sourcemap的文件， 一旦出错 会标识 当前出错的 行列
增加映射文件 可以帮我们调试源代码：

分为以下三类：

1-devtool:'source-map' 最常用单独生成文件，出错 标识行列 阐述详细
2-devtool:' eval-source-map' 不产生文件 但是标识别 行列
3-devtool:'cheap-module-source-map ' 不产生文件集成打包文件内 不产生列

先贴上参考源码：

const path=require('path');
const  HTMLWebpackPlugin = require("html-webpack-plugin");
module.exports={
    mode:'development',
    // 入口
    entry:'./src/index.js',
    output:{
        filename:'bundle.[hash:8].js',  //添加[hansh]  防止内存覆盖也缓存问题
        path:path.resolve(__dirname,'dist')  //解析出一个绝对路径  \MYPRO\dist
    },
    plugins:[
        new HTMLWebpackPlugin({
            template:'./index.html',
            filename:'index.html',
        })
    ],
   devtool:'source-map'   //添加源代码映射
    ,
  module:{
      rules:[
          {
              test: /.js$/,
              use: {
                  loader:'babel-loader',
                  options:{
                      presets:[
                          '@babel/preset-env'
                      ]
                  }
              }
          }
      ]
  }
    ,

    devServer: {
        //开发服务器配置
        port:3000,
        progress:true,
        contentBase:'./dist'    //打包后输出到的目录
   }
}

先在index.js把代码写错，等带 sourcemap报错

let app=function(){
        console.lo("okok")
}

app();

在浏览器报错得到映射：

sourcemap.png