• Webpack如何配置sourceMap


    前言:在写这篇文章之前,我必须要吐槽一下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. 这个配置必须
    }
     
     
  • 相关阅读:
    Linux驱动开发入门基础
    【编译原理笔记】Token符号表
    【编译原理笔记】常见处理器寄存器
    【编译原理笔记】CPU指令集
    【编译原理笔记】高级语言翻译为中间语言
    对于error: failed to push some refsto‘远程仓库地址’
    【编译原理笔记】go编译器指令集SSA
    【编译原理笔记】My汇编语言
    gRPC入门双向流式通信
    【编译原理笔记】抽象语法树翻译为汇编语言
  • 原文地址:https://www.cnblogs.com/warm-stranger/p/12015860.html
Copyright © 2020-2023  润新知