精华内容
下载资源
问答
  • is not in the SourceMap.'); ^ Error: "." is not in the SourceMap. at BasicSourceMapConsumer.SourceMapConsumer_sourceContentFor [as sourceContentFor] (/cloud/source_code/node_modules/_...
  • <p>I tried to create source map with webpack config <code>devtool: 'source-map', since directly using the <code>create_source_map</code> option of closure compiler is not recommended. However ...
  • webpack官网,我们可以看到关于生产sourcemap文件的模式一些介绍。下图 production为yes的为只能在生成环境中试用,开发环境中会不省心 cssmap生成 不使用style-loader 使用MiniCssExtractPlugin module: { ...

    Source Map介绍 - webpack篇

    webpack官网,我们可以看到关于生产sourcemap文件的模式一些介绍。下图

    • production为yes的为只能在生成环境中试用,开发环境中会不省心
      在这里插入图片描述

    cssmap生成

    1. 开启devtool
    2. 不使用style-loader
    3. 使用MiniCssExtractPlugin
     module: {
        rules: [
          {
            test: /\.css$/i,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
              },
              'css-loader', 
            ],
          },
        ]
     },
     plugins: [
       new MiniCssExtractPlugin({
         filename: './dist.css',
       })
     ],
    

    试用UglifyJsPlugin时候的sourceMap配置

    module.exports = {
      optimization: {
        minimizer: [
          new UglifyJsPlugin({
            sourceMap: true,
          }),
        ],
      },
    };
    

    其他的sourcemap配置

    {
      output: {
        // Modify the name of the generated source map file.
        // You can use [file], [id], and [hash] replacements here.
        // The default option is enough for most use cases.
        sourceMapFilename: '[file].map', // Default
    
        // This is the source map filename template. It's default
        // format depends on the devtool option used. You don't
        // need to modify this often.
        devtoolModuleFilenameTemplate:
          'webpack:///[resource-path]?[loaders]'
      },
    }
    

    高级配置插件

    • SourceMapDevToolPlugin and EvalSourceMapDevToolPlugin

    参考链接

    1. webpack Devtool
    2. Source Maps 文件内容介绍
    3. Webpack devtool source map 打包文件大小
    展开全文
  • webpack-sourcemap

    2020-05-18 13:04:02
    1.什么是sourcemapwebpack打包后的文件会自动添加很多代码, 在开发过程中非常不利于我们去调试 因为如果运行webpack打包后的代码,错误提示的内容也是打包后文件的内容 所以为了降低调试的难度, 提高错误代码的...

    1.什么是sourcemap?

    webpack打包后的文件会自动添加很多代码, 在开发过程中非常不利于我们去调试
    因为如果运行webpack打包后的代码,错误提示的内容也是打包后文件的内容
    所以为了降低调试的难度, 提高错误代码的阅读性, 我们就需要知道打包后代码和打包之前代码的映射关系
    只要有了这个映射关系我们就能很好的显示错误提示的内容, 存储这个映射关系的文件我们就称之为sourcemap

    2.如何开启sourcemap

    https://www.webpackjs.com/configuration/devtool/

    2.1在webpack.config.js中添加

    devtool: “xxx”,

    2.2各配置项说明:

    eval:
    不会单独生成sourcemap文件, 会将映射关系存储到打包的文件中, 并且通过eval存储
    优势: 性能最好
    缺点: 业务逻辑比较复杂时候提示信息可能不全面不正确

    source-map:
    会单独生成sourcemap文件, 通过单独文件来存储映射关系
    优势: 提示信息全面,可以直接定位到错误代码的行和列
    缺点: 打包速度慢

    inline:
    不会单独生成sourcemap文件, 会将映射关系存储到打包的文件中, 并且通过base64字符串形式存储

    cheap:
    生成的映射信息只能定位到错误行不能定位到错误列

    module:
    不仅希望存储我们代码的映射关系, 还希望存储第三方模块映射关系, 以便于第三方模块出错时也能更好的排错

    2.3企业开发配置:

    development: cheap-module-eval-source-map
    只需要行错误信息, 并且包含第三方模块错误信息, 并且不会生成单独sourcemap文件

    production: cheap-module-source-map
    只需要行错误信息, 并且包含第三方模块错误信息, 并且会生成单独sourcemap文件

    展开全文
  • webpackSourceMap

    2020-06-07 18:41:02
    (一)什么是sourceMap sourceMap其实是一个映射关系,比如打包后的js文件(如dist目录下main.js第78行报错了),sourceMap能够找到(dist目录下main.js第78行)对应的打包前的源文件(是哪个文件夹下的哪一行) ...

    (一)什么是sourceMap

    sourceMap其实是一个映射关系,比如打包后的js文件(如dist目录下main.js第78行报错了),sourceMap能够找到(dist目录下main.js第78行)对应的打包前的源文件(是哪个文件夹下的哪一行)

    (二)用法 

    在 webpack.config.js 中 module.exports 里面加一行

    devtool: 'source-map'

    devtool有很多source-map形式,详情见webpack手册devtool部分

    配置好后,devtool: 'source-map' 会在打包后生成 .map 文件

    mode: 'development' 默认开启source-map

    (三)实验

    mode: 'production' 下先来个不加source-map 的,打包后运行,控制台报错后,

    告诉你打包好后的js文件报错了

    添加source-map 后

    会定位到源文件的具体哪行哪列

    不过这种方式会在dist文件夹下生成 .map 文件

    还有一种 inline-source-map

    不会生成.map文件,会把source-map结果嵌入进打包好的js文件里

     

    还有很多选项可供选择,详见官网

     

     

     

     

     

     

    展开全文
  • webpacksource map

    2020-11-29 18:50:52
    webpacksource map前言一、什么是source map二、在webpack中启用source map三、关于source map的各种模式 前言 通过构建编译之类的操作,我们可以将开发阶段的源代码,转换为能够在生产环境中运行的代码,这是一种...

    前言

    通过构建编译之类的操作,我们可以将开发阶段的源代码,转换为能够在生产环境中运行的代码,这是一种进步,但这种进步的同时也意味着我们在实际生产环境中运行的代码与我们在开发环境编写的代码之间会有很大的差异,这种情况下如果我们需要去调试应用,又或是我们在运行应用时出现了意料之外的错误,我们将无法定位错误信息。因为无论是调试还是调试还是报错都是基于转换过后的代码来进行的,source-map就是解决这类问题最好的一个办法。

    一、什么是source map

    source map 翻译过来就是源代码地图,它是用来映射我们转换后的代码与源代码之间的关系,转换后的代码我们通过转换过程中生成的source-map文件就可以逆向得到源代码。
    一般打包生成后的bundle.js中会通过一段注释来引用source-map文件。

    二、在webpack中启用source map

    我们可以通过配置文件webpack.config.js中的devtool来配置source map。

    // webpack.config.js
    module.exports = {
    	..., // 其他的配置这里就不废话了
    	devtool:"source-map"
    }
    

    执行打包yarn webpack,我们的dist目录中会多出一个bundle.js.map文件
    在这里插入图片描述
    在bundle.js最后一行,通过注释引入了source map文件。
    在这里插入图片描述
    这里我故意写个个错误的代码
    在这里插入图片描述
    会提示错误行数,点击可以直接跳转到错误位置。
    在这里插入图片描述

    三、关于source map的各种模式

    在webpack中,source map有十二种模式,不同模式下生成的source map效果会有一定差别,并且打包速度以及webpack-dev-server重新构建的速度也不一样,我这里只是进行了一些关键词的解释,有兴趣的读者可以去官网查看详细解析。

    const allModes = [
        'eval',// 带有eval的,表示以使用eval执行模块代码
        'eval-source-map',
        'eval-cheap-source-map',// cheap表示包含行信息
        'eval-cheap-module-source-map', // 有module的模式下,source map中的代码是没经过loader加工过的,也就是我们手写的代码
        'cheap-source-map',
        'cheap-module-source-map',
        'inline-source-map',// 和普通的soure map效果基本一样,只不过sourcemap模式下,它的sourcemap文件是以物理文件的方式存在,inline-source-map是将sourcemap以DataUrl的方式嵌入到代码中(和eval有些类似),这会导致代码体积大很多
        'inline-cheap-source-map',
        'inline-cheap-module-source-map',
        'source-map',
        'hidden-source-map',// 这个模式下,我们在开发工具中是看不到效果的,但是它确实生成了sourcemap文件,这和jquery一样,生成了sourcemap文件但并没有在代码中注释引入,这个模式一般是我们在开发一些第三方包的时候可能会用到
        'nosources-source-map'// 这个模式下我们能看到错误出现的位置,但是我们点击错误信息进去是看不到源代码的,nosources指的就是没有源代码,但还是提供了行列信息,我们可以结合源代码找到错误代码
    ]
    

    推荐
    开发环境建议使用eval-cheap-module-source-map,我们的代码每行一般不会太长,经过loader转换后可能有较大差异,这种模式重写打包相对较快。

    生产环境使用none,即不使用sourcemap,因为sourcemap会暴露源代码,如果实在担心自己写的代码出问题,可以用nosources-source-map,这样不会有被别人窃取源代码的危险,又能自己根据行列信息找到错误代码。

    有兴趣的读者还可以尝试使用每种模式打包一次,看看效果。

    // 使用这段代码记得安装babel-babel,yarn add babel-loader @babel/core @babel/preset-env --dev
    // 使用babel-loader编译转换后更容易区分,带有module的模式与不带module模式的区别
    
    const allModes = [
        'eval',// 带有eval的,表示以使用eval执行模块代码
        'eval-source-map',
        'eval-cheap-source-map',// cheap表示包含行信息
        'eval-cheap-module-source-map', // 有module的模式下,source map中的代码是没经过loader加工过的,也就是我们手写的代码
        'cheap-source-map',
        'cheap-module-source-map',
        'inline-source-map',// 和普通的soure map效果基本一样,只不过sourcemap模式下,它的sourcemap文件是以物理文件的方式存在,inline-source-map是将sourcemap以DataUrl的方式嵌入到代码中(和eval有些类似),这会导致代码体积大很多
        'inline-cheap-source-map',
        'inline-cheap-module-source-map',
        'source-map',
        'hidden-source-map',// 这个模式下,我们在开发工具中是看不到效果的,但是它确实生成了sourcemap文件,这和jquery一样,生成了sourcemap文件但并没有在代码中注释引入,这个模式一般是我们在开发一些第三方包的时候可能会用到
        'nosources-source-map'// 这个模式下我们能看到错误出现的位置,但是我们点击错误信息进去是看不到源代码的,nosources指的就是没有源代码,但还是提供了行列信息,我们可以结合源代码找到错误代码
    ]
    
    module.exports = allModes.map( item => {
        return {
            devtool:item,
            mode:"none",
            entry:"./src/main.js",
            output:{
                filename:`js/${item}.js`
            },
            module:{
                rules:[
                    {
                        test:/\.js$/,
                        use:{
                            loader:"babel-loader",
                            options:{
                                presets:['@babel/preset-env']
                            }
                        }
                    }
                ]
            }
        }
    })
    
    展开全文
  • 1.什么是sourcemap? webpack打包后的文件会自动添加很多代码, 在开发过程中非常不利于我们去调试 因为如果运行webpack打包后的代码,错误提示的内容也是打包后文件的内容 所以为了降低调试的难度, 提高错误代码的...
  • webpack之使用source map

    2019-06-11 11:47:31
    webpack之使用source map source map关键字 eval:使用eval包裹模块代码 source map:产生.map文件 ...module:包含loader的sourcemap 在开发模式的配置文件中加上以下代码` devtool:'eval' ...
  • webpack source map详解

    千次阅读 2018-07-12 17:34:47
    当使用webpack 编译前端项目时,配置项devtool控制是否生成source map。 2. 分类  source map 文件可分为2类,内联型和外联(独立)型:  内联源映射,将映射的数据之间添加在生成的文件中,在.map文件中的...
  • webpack SourceMap 配置

    千次阅读 2019-03-13 17:14:05
    webpack mode 是 “development”时,默认是sourcemap 已经配置进去了的。 下面是我们的代码,此时,mode 是 “development”,此时sourcemap 默认已经配置进去了。 const path = require('path'); const ...
  • webpack-sourceMap配置

    2020-12-23 18:44:45
    文章目录一、webpack-sourceMap配置 一、webpack-sourceMap配置 SourceMap 是什么,下面通过例子来演示。 修改 webpack.config.js,加上一行配置项 devtool: 'none' : const path = require('path'); const ...
  • webpacksource map

    2020-05-27 14:26:07
    source map 将编译后的代码映射到原始源代码 devtool 是否生成source map,怎么生成source map,devtool说了算。 不同的值会明显影响到构建(build)和重构建(rebuild)速度。 参考文章 使用source map devtool ...
  • 但是开发者忽视起潜在风险,在线上环境使用了开发环境的配置,或者配置了sourcemap允许在生产环境中使用。这使得我们有了机会。在实际渗透过程中,许多网站还是存在这种情况。通常一般是配置了devtool: 'source-map'...
  • 但是开发者忽视起潜在风险,在线上环境使用了开发环境的配置,或者配置了sourcemap允许在生产环境中使用。这使得我们有了机会。 在实际渗透过程中,许多网站还是存在这种情况。通常一般是配置了devtool: 'source-...
  • Webpack5 - Source Map选择

    2020-12-27 18:54:33
    在 编译后的js文件末尾添加 引入 sourceMap 文件的注释: //# sourceMapURL = jquery-3.1.4.min.map 二. webpack 中开启source map 生成 webpack.config.js: module.exports = { // 开启 source map // 开发...
  • source-map" to work. In webpack 2 the default devtool setting is "#cheap-module-eval-source-map" regarding to the documentation. Webpack provides multiple types of inline and file based ...
  • 这是一个插件,可简化从webpack构建生成的源地图上传到。 生产JavaScript捆绑包通常会在部署之前缩小,这会使Rollbar堆栈跟踪非常无用,除非您采取措施上载源地图。 您现在可以在部署过程中触发的Shell脚本中执行...
  • 一、webpacksource map是什么目前我们的例子都是在浏览器里运行编译打包后的代码,编译后的代码会把我们的原始代码做压缩整合等操作。这样的代码与原始代码差别非常大,对于我们开发时是没有帮助的,我们很难调试...
  • spec says, lines count from 1, so 0 line is illegal and fails webpack source map verification. fragments seem to have no line number if they don't belong to a sexp. Thats ok, so if line is nil or ...
  • <p>In webpack mode, there is no way to ask for nestjs to pass sourcemaps to be compiled at build time. <h2>Expected behavior <p>Have the ability to have source map support using ...
  • <p>Sadly, sourcemap is not working at all. Webpack 4.8.1 doesn't generate a .map in combination with mini-css-extract-plugin and sass-loader. Any fix? <p>Plugin configuration: <pre><code> new ...
  • webpacksourcemap

    2017-11-03 07:59:46
    作用:主要用于调试,现在代码都会经过压缩混淆,这样报错提示会很难定位代码,sourcemap就是一个信息文件,里面存储着位置信息,也就是说,转换后的代码的每个位置,所对应的转换前的位置(阮老师有详细解释) ...
  • Webpack SourceMap快速定位错误位置

    千次阅读 2020-05-15 09:35:48
    然而有了SourceMap,它可以对打包前后的文件进行映射。Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了这种映射关系后,出错时,可以在控制台...
  • webpack中的sourcemap

    2019-02-28 16:59:00
    sourcemap:是一项debug技术。 在webpack中有五种基本的配置。 eval source-map cheap module inline eval: 使用eval将模块包裹,在末尾加入sourceURL,速度快 source-map: 产生一个.map的文件,文件里面...
  • webpack sourcemap是一种能够提供打包后代码错误位置的技术,有了这项技术我们能够知道代码错误的具体位置 使用方法 在webpack.config.js中配置即可 devtool:'source-map' 有几种不同的配置项 source-map: 外联 ...
  • 在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差。如果在开发过程中遇到一个不知道原因的 Bug,则你可能需要通过断点调试去...方案一:Webpack 支持生成 Source Map,只需在启动时带上...
  • webpack中使用source map

    2020-05-16 22:38:17
    source map的功能就是将编译后的代码映射回原始源代码,可以明确的找到错误或警告的代码位置。 代码演示: const HtmlWebpackPlugin = require('html-webpack-plugin');//默认会创建一个 var webpack = require('...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,461
精华内容 1,384
关键字:

sourcemapwebpack