前端开发之工程:webpack-sourceMap

sourceMap

  1. source-map

  2. cheap-source-map
    // 编译转化后的代码,并且只定位到首行, 生成.map

  3. inline-cheap-source-map

开发环境

--config----描述----map--
eval-cheap-module-source-map折中的选择, 编译后的代码,定位不准, 没有生成列映射(column mapping),只是映射行数,loader source map 会被简化为每行一个映射(mapping)。不单独生成.map文件不推荐
eval具有高性能的开发版本的推荐选择,会映射到转换后的代码,而不是映射到原始代码, 不能正确的显示行数生成.map
eval-source-map最高质量的sourcemap不生成js.map, 生成css.map

生产环境

--config----描述----map--
devtool:null最高性能生成.map文件推荐
source-map高质量的sourcemap生成.map文件推荐
hidden-source-map隐藏map,手动添加生成.map
nosources-source-map映射堆栈跟踪, 不暴露源代码生成.map(体积较小)
  1. hidden-source-map
    • 用来发送错误报告
    • 手动开启source-map: 复制当前编译后文件名:chrome中当前文件头部右键=> copy filename =>文件中 右键=>add source map => 输入${filename}.map=>添加

customize-cra

  1. 不生成sourcemap process.env.GENERATE_SOURCEMAP = false

    module.exports = override(
        ...
        process.env.GENERATE_SOURCEMAP = false // 大大缩小包体积,但是无法在线查看源码
    ),
  2. 配置示例

    const {
      override,
      addWebpackAlias,
      useEslintRc,
    } = require("customize-cra");
    module.exports = override(
      useEslintRc(".eslintrc"),
      addWebpackAlias({
        "@": require("path").resolve(__dirname, "src"),
        react: require("path").resolve(__dirname, "node_modules/react"),
      }),
      (config)=>{
        config.devtool = "eval-source-map" //配置sourcemap
        return config
      },
    )
暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇