前言

大家好，我是东东吖，一名前端工程师。不知道你有没有遇到过在生产环境发生报错，但是我们看不见源代码，由于运行的是经过编译之后的代码，导致我们无法定位到报错代码的具体位置，那该怎么办呢？有没有什么方法可以让我们可以看见源代码定位问题吗？答案是：当然有，这可以通过我们的Source Map解决。

Source Map 介绍

Source Map 本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。Source Map解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，造成无法debug的问题，Source Map解决的是源代码和编译后的代码无法区分，发生错误后无法定位问题和调试。

配置Source Map

//webpack.config.js

// 生成source-map 文件
  devtool:'source-map',

执行打包命令，就会生成source map文件，并且会在bundle.js的最后通过注释的方式引入。

现在我们在代码中估计添加一行错误代码

再次打包，运行应用，就会报错。

点击报错，就能直接定位到我们的源码

如果我们把 devtool:'source-map',这行配置代码注释掉，浏览器报错就是下面这样的，我们无法定位到代码报错的具体文件和位置。

通过一个小小的配置，就能快速定位生产上的问题，是不是真香！！！。

Webpack eval 模式的 Source

• Source有很多种模式，今年我们来认识一下eval模式的Source。
• eval()函数用于计算JavaScript字符串，并把它作为脚本代码来执行。如果参数是一个表达式。 eval()函数将执行表达式。如果参数是Javascript语句，eval()将执行Javascript 语句。

我们在控制台小试牛刀：

将配置文件中的devtool由source-map改为eval 执行打包命令，启用程序

Webpack devtool模式

为了区分不同的devtool模式，我们重新创建了一个项目，然后定义了两个出口,可以发现会打包出a.js和b.js两个文件。

module.exports =[
  {
    entry: "./src/main.js", //打包前入口
      output: {
    //打包后出口
    filename: "a.js", //打包后文件名
   
  },
  },
  {
    entry: "./src/main.js", //打包前入口
      output: {
    //打包后出口
    filename: "b.js", //打包后文件名
  },
  }
]

知道原理后，我们来定义一个devtool模式数组，再遍历它，将它的打包成对应的文件名。

// 定义一个devtool模式数组
const allModes=[
    'eval',
    'cheap-eval-source-map',
    'cheap-module-eval-source-map',
    'eval-source-map',
    'cheap-source-map',
    'cheap-module-source-map',
    'inline-cheap-source-map',
    'inline-cheap-module--source-map',
    'source-map',
    'inline-source-map',
    'hidden-source-map',
    'nosources-source-map'
  ]


  module.exports =allModes.map(item=>{
    return{
      devtool:item,
      mode:'none',
      entry: "./src/main.js", //打包前入口
      output: {
      //打包后出口
      filename: `js/${item}.js`, //打包在js文件夹下
  },
    }
  })

这里可能会报错 原因:webpack 版本过高，与你的写的配置项冲突 解决方法： 1.首先检你的配置项目（webpack.config.js）参数是否正确 2. 降级你的webpack版本

npm install webpack@4.44.0

生成html文件：

const HtmlWebpackPlugin=require('html-webpack-plugin')

// 定义一个devtool模式数组
const allModes=[
    'eval',
    'cheap-eval-source-map',
    'cheap-module-eval-source-map',
    'eval-source-map',
    'cheap-source-map',
    'cheap-module-source-map',
    'inline-cheap-source-map',
    'inline-cheap-module--source-map',
    'source-map',
    'inline-source-map',
    'hidden-source-map',
    'nosources-source-map'
  ]


  module.exports =allModes.map(item=>{
    return{
      devtool:item,
      mode:'none',
      entry: "./src/main.js", //打包前入口
      output: {
      //打包后出口
      filename: `js/${item}.js`, //打包在js文件夹下
      },
      module:{
        rules:[
          {
            test:/\.js$/,
            use:{
              loader:'babel-loader',
              options:{
                presets:['@babel/preset-env']
              }
            }

          }
        ]
       },
       plugins:[
        new HtmlWebpackPlugin({
          filename:`${item}.html`
        })
      ]
    
      }
  
  })

以下就是Webpack devtool模式，这里的模式有各自的差异，我就不细讲了，感兴趣的朋友可以自己去研究。

那这么多的模式，我们如何选择合适的Source Map呢? 这里我推荐

• 开发模式：cheap-module-eval-source-map
• 生产环境：none

结束