webpack学习笔记 —— 使用SourceMap完成代码配置

前言

最近在学习Webpack，今天来学习一下关于SourceMap的基础使用和使用方法

准备阶段

• webpack.config.js
• 入口js

流程

在webpack.config.js 中配置sourceMap

eval-source-map

module.exports = {
    // production development
    mode: "production",
    devtool: "eval-source-map",
}

同时配置webpack的 packge,json

  "scripts": {
    "build": "webpack --mode production"
  },

配置一个main.js 文件

import $ from "jquery";

//错误
consol.log("Person: " + Person)

执行： npm run build

模糊了行号但没完全模糊

这时候就会有小伙伴问了，这还不如不配呢，重点来了，我们换一种devmap方式

nosources-source-map

    devtool: "nosources-source-map"

我们看到了具体的报错行号，但是 点进去不会直接显示源码数据
出现如下效果

无法加载 webpack://webpackDemo/src/index.js 的内容（Fetch through target failed: Unsupported URL scheme; Fallback: HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME）

这样我们就不会出现源代码同时也能标识具体错误情况

我们看看其他的dev配置会成什么样

source

module.exports = {
    // production development
    mode: "production",
    devtool: "source-map",
}

Source配置结果和不配一样

温馨提示

生成阶段：source or eval-source-map
发布阶段：nosources-source-map

结束语

关于 webpack学习笔记 —— 使用SourceMap完成代码配置 就讲到这里，对你有帮助的话！

• 点赞
• 收藏

谢谢你的观看！