webpack 不同 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. 这个配置必须}