前言：在写这篇文章之前，我必须要吐槽一下webpack了。特别喜欢更新版本，更新就算了，文档还跟不上。文档真的让人迷惑了，，大爷的。

背景：由于我正在写sourceMap反向定位源码的功能，所以最近需要使用到webpack的source-map配置。因为公司webpack的版本有2.0和4.0的，所以在做sourceMap配置的时候，真的是花费了很大的气力。无力吐槽，我们看正文吧

===============================================================================

　　=  开源项目：前端监控系统  --- 只需要简单几步，就可以搭建一套属于自己的前端监控系统，快试试吧。 =

　　===============================================================================

SourceMap是一种映射关系。当项目运行后，如果出现错误，我们可以利用sourceMap反向定位到源码。

const path = require(‘path‘); module.exports = { devtool: ‘none‘, // SourceMap的模式（见下表） entry: ‘./src/index.js‘, // 入口文件 output: { filename: ‘bundle.js‘, // 文件名 path: path.resolve(__dirname, ‘dist‘) // 文件夹 } }

SourceMap不同模式的特点（见下表）

 

模式解释
eval   每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL.  
source-map   生成一个SourceMap文件（编译速度最慢）  
hidden-source-map   和 source-map 一样，但不会在 bundle 末尾追加注释.  
inline-source-map   生成一个 DataUrl 形式的 SourceMap 文件.  
eval-source-map   每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap.  
cheap-source-map   生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）  
cheap-module-source-map   生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

 

1. webpack2.0+； webpack配置 devtool: "source-map" 无效。

 

　sourceMap正确配置如下：

const buildConfig = { mode: "production", output: { path: distPath, filename: "./js/[name].[hash].min.js", publicPath: "./" }, plugins: [ new UglifyJSPlugin({ // 1. 这个配置必须 sourceMap: true }), ].concat(baseConfig.htmlArray), devtool: "source-map" // 2. 这个配置必须 }

2. webpack4.0+； webpack配置 devtool: "source-map" 生成的map代码没有 sourcesContent，没有sourcesContent的结果是你只能定位要压缩代码的位置，无法定位到源码的位置

sourceMap 正确配置如下：

const buildConfig = { mode: "production", output: { path: distPath, filename: "./js/[name].[hash].min.js", publicPath: "./" }, optimization: { // 1. 这个配置必须 minimize: false }, plugins: [ ].concat(baseConfig.htmlArray), devtool: "source-map" // 2. 这个配置必须 }

 

 

Webpack如何配置sourceMap