npm 包 webpack-mapping-plugin 使用教程

阅读时长 5 分钟读完

前言

在前端开发中,webpack 扮演着非常重要的角色。我们可以通过配置 webpack,将多个 JS 文件打包成一个 bundle,从而减小服务器端的带宽压力,提高网页性能。然而,有时候我们可能需要在压缩后的 JS 文件中查找某个函数或变量的定义,这时候我们需要一个映射文件,将这些东西的位置映射到原始文件中的位置。webpack-mapping-plugin 就是帮助我们生成映射文件的一个 npm 包。

安装

首先,我们需要在项目中安装 webpack-mapping-plugin:

配置

安装完毕后,我们需要在 webpack 的配置文件中引入并配置 webpack-mapping-plugin。以 webpack 4.x 为例,在 webpack 的 plugins 中新增如下配置:

-- -------------------- ---- -------
----- ------------- - ----------------------------------

-------------- - -
  -- -------
  -------- -
    --- ---------------
      ------------ ----
    --
  -
-

writeToFile 参数表示是否将映射文件写入磁盘文件,默认为 true。如果设置为 false,则生成的映射文件只会存在于内存中。

使用

webpack-mapping-plugin 会为每个输出的 JS 文件生成一个对应的 .map 文件,例如:

生成的 .map 文件格式符合 source map 标准,可以通过 devtools 工具进行调试。如果某个函数或变量在压缩前的位置为 (2, 10),在压缩后的位置为 (1, 20),则我们可以通过 .map 文件定位到压缩前的位置:

示例

假设我们有如下的项目结构:

其中,src/index.js 文件:

src/utils.js 文件:

我们要对这些文件进行打包,并生成映射文件。在 webpack 的配置文件 webpack.config.js 中,可以这样配置:

-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - ----------------------------------

-------------- - -
  ------ -----------------
  ------- -
    ----- ----------------------- --------
    --------- -----------
  --
  -------- -------------
  -------- -
    --- ---------------
  -
--

配置完毕后,在终端中输入 npx webpack 命令进行打包。打包成功后,我们可以在 dist 目录下找到生成的映射文件 bundle.js.map。我们打开压缩后的 bundle.js 文件,可以看到开头注释中有一个 sourceMappingURL 的字段,这个字段指向了对应的 .map 文件:

在浏览器的开发者工具中,我们可以找到源代码中的函数或变量,然后通过 .map 文件定位到压缩前的位置,如下图所示:

总结

webpack-mapping-plugin 可以帮助我们自动生成映射文件,方便我们在压缩后的代码中进行调试。它的使用方法也比较简单,在 webpack 的 plugins 中新增一个 MappingPlugin 实例即可。最后,希望这篇教程对大家有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd7a

纠错
反馈