webpack ->source-map 的使用

一: 认识source-map

我们的代码在浏览器上运行时,通常是打包压缩的

• 也就是真实跑在浏览器上的代码,和我们编写的代码其实是有差异的.
• 比如ES6 的代码 可能被转换成ES5;
• 比如对应的代码行号,列号在经过编译后肯定会不一致.
• 比如代码进行丑化压缩时,会将编码名称等修改;
• 比如我们使用了TypeScript 等方式编写的代码,最终转换成JavaScript

但是,当代码报错需要调试时(debug),调试转换后的代码是很困难的.

但是我们能保证代码不出错吗? 不可能

那如何可以调试这种转换后不一致的代码呢?

答案就是source-map

• source-map 是从已转换的代码,映射到原始的源文件.
• 使浏览器可以重构原始源并在调试器中显示重建的原始源

二:如何使用 source-map

如何可以使用source-map呢? 两个步骤:

第一步: 根据源文件,生成source-map文件,webpack 在打包时,可以通过配置生成source-map

• devtools:“source-map”

第二步: 在转换后的代码,最后添加一个注释,它指向sourcemap;

• // #sourceMappingRUL=common.bundle.js.map

webpack 配置举例

module.exports = {
  mode: "development",
  entry: "./main.js",
  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
};

浏览器会根据我们的注释,查找相应的source-map,并且根据source-map还原我们的代码,方便调试

在Chrome 中,我们要按照如下的方式打开soucre-map,否则 source-map 也不会起作用.