Webpack系列-SourceMap

admin 2022年4月22日22:15:30安全文章评论5 views1178字阅读3分55秒阅读模式

作用

建立源代码和打包生成代码的对应关系;

module.exports = {
  mode'development',
  devtool'eval-source-map',//建立源代码和打包生成代码的对应关系;
  entry: {
    main'./src/index.js',
  },
  output: {
    filename'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template'./src/index.html',
    }),
    new CleanWebpackPlugin(),
  ],
};

报错:

Uncaught TypeError: console.logg is not a function
    at eval (index.js?b635:1:1)         //这是源代码出错的位置
    at Object../src/index.js (bundle.js:18:1)  //这是打包后的代码出错的位置

SourceMap配置的地方:

  devtool: 'eval-source-map',//建立源代码和打包生成代码的对应关系;

更多配置参考: https://webpack.js.org/configuration/devtool/

配置1:

  devtool: 'source-map',//建立源代码和打包生成代码的对应关系;

dist文件下会有一个和输出文件同名的map文件生成;

生成文件为1.js, 有一个对应的map文件为1.js.map

配置2(常用的):

  devtool: 'eval-cheap-source-map',//建立源代码和打包生成代码的对应关系;

eval-cheap-source-map - Similar to eval-source-map, each module is executed with eval(). It is "cheap" because it doesn't have column mappings, it only maps line numbers. It ignores SourceMaps from Loaders and only display transpiled code similar to the eval devtool.

开发模式时:

 mode: 'production',
  devtool'cheap-module-source-map',//建立源代码和打包生成代码的对应关系;


原文始发于微信公众号(迪哥讲事):Webpack系列-SourceMap

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年4月22日22:15:30
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  Webpack系列-SourceMap http://cn-sec.com/archives/936149.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: