【webpack快速入门】生产环境发生报错,看不见源代码怎么办?

1,560 阅读3分钟

前言

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

Source Map 介绍

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

配置Source Map

//webpack.config.js

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

image.png

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

image.png

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

image.png

再次打包,运行应用,就会报错。 image.png

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

image.png

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

image.png

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

Webpack eval 模式的 Source

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

我们在控制台小试牛刀:

image.png

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

image.png

Webpack devtool模式

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

image.png

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

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

image.png


// 定义一个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文件:

image.png

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模式,这里的模式有各自的差异,我就不细讲了,感兴趣的朋友可以自己去研究。

image.png

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

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

结束

通过本文,你现在还担心生产环境报错定位不到源代码吗, 对于本文章,你有任何疑问,可在评论区留言。如果想进前端交流群(目前群里有40余人前端工程师,气氛活跃,欢迎大家加入),可以加我微信fangdongdong_25,请备注掘金哦。