webpack sourcemap配置详解

一、什么是sourcemap

sourcemap是一种文件，它存储了编译前的代码与编译后的代码之间的映射，主要被用于调试。在webpack中，开启sourcemap功能可以将编译后生成的文件映射回源文件，这样我们在调试时就可以像调试源代码一样来调试编译后的代码了。

二、sourcemap的添加方式

1、使用devtool参数

module.exports = {
  devtool: 'source-map'
}

使用devtool参数指定sourcemap的生成方式，它有以下几个选项：

• eval: 使用eval包裹模块代码，并在后面添加sourceURL。
• source-map: 生成一个外部的sourcemap文件，和bundle文件同名，但是后缀为.map。
• hidden-source-map: 和source-map类似，但是不会在bundle文件末尾添加注释。
• inline-source-map: 生成一个只有dataUrl形式的sourcemap文件，和bundle文件在同一个文件中。
• cheap-source-map: 生成一个没有列信息的sourcemap文件，可以提高构建速度。
• cheap-module-source-map: 生成一个没有列信息的sourcemap文件，同时loader的sourcemap也被简化为只包含对应行的信息，可以提高构建速度。

2、使用插件

可以使用webpack的SourceMapDevToolPlugin插件来生成sourcemap，具体配置如下：

const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: '[name].js.map',
      exclude: ['vendor.js'] // 排除不需要生成sourcemap的文件
    })
  ]
};

三、sourcemap的优缺点

1、优点

• 可以方便地追踪到编译后的代码对应的源代码位置，从而实现更快的debug。
• 可以在编写代码时找到错误的位置，提高代码编写的效率。

2、缺点

• sourcemap文件会增加构建时的时间和文件大小。
• sourcemap文件可以暴露源代码，存在安全风险。

四、常见问题解答

1、如何禁用sourcemap功能

可以在webpack.config.js中设置devtool为false来禁用sourcemap功能：

module.exports = {
  devtool: false
}

2、如何设置sourcemap的输出路径

可以在webpack.config.js中设置output.sourceMapFilename来指定sourcemap的输出路径：

module.exports = {
  output: {
    filename: '[name].js',
    sourceMapFilename: 'dist/[file].map'
  }
}

3、如何调试webpack打包后的第三方库

可以使用externals配置来排除第三方库的打包，并使用devtool指定合适的sourcemap选项进行调试：

module.exports = {
  externals: {
    jquery: 'jQuery'
  },
  devtool: 'source-map'
}

4、如何在本地开发环境中启用sourcemap

可以使用devServer的devtool选项来启用sourcemap：

module.exports = {
  devServer: {
    inline: true,
    devtool: 'cheap-module-eval-source-map'
  }
}

五、总结

sourcemap是一种非常实用的调试工具，可以帮助我们更方便地追踪编译后的代码对应的源代码位置，提高调试效率。在使用sourcemap的同时，也需要注意文件大小和安全风险等问题。