• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

webpack 不同 sourcemap 含义?

互联网 diligentman 2天前 4次浏览

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 含义?
喜欢 (0)