webpack 高级

SourceMap

1. 是什么？

   SourceMap是生成的源文件和打包后文件一一映射的一种.map文件

打包后文件很难定位到源文件出现的问题，需要通过sourceMap与源文件建立联系，方便定位问题

2. 咋用？

可以通过webpack文档查看不同模式的打包速度等信息

实际开发：

• 开发模式：cheap-module-source-map
• 优点：打包编译速度快，只包含行映射
• 缺点：没有列映射

module.exports = {
  // 其他省略
  mode: "development",
  devtool: "cheap-module-source-map",
};

建立映射关系可以更方便的定位到源文件报错位置

• 生产模式source-map

• 优点：包含行/列映射关系

• 缺点：打包编译速度更慢

module.exports = {
  // 其他省略
  mode: "development",
  devtool: "source-map",
};

会在打包文件中生成.map文件，映射行列关系