前言
在前端开发中,webpack 扮演着非常重要的角色。我们可以通过配置 webpack,将多个 JS 文件打包成一个 bundle,从而减小服务器端的带宽压力,提高网页性能。然而,有时候我们可能需要在压缩后的 JS 文件中查找某个函数或变量的定义,这时候我们需要一个映射文件,将这些东西的位置映射到原始文件中的位置。webpack-mapping-plugin 就是帮助我们生成映射文件的一个 npm 包。
安装
首先,我们需要在项目中安装 webpack-mapping-plugin:
npm install webpack-mapping-plugin --save-dev
配置
安装完毕后,我们需要在 webpack 的配置文件中引入并配置 webpack-mapping-plugin。以 webpack 4.x 为例,在 webpack 的 plugins
中新增如下配置:
-- -------------------- ---- ------- ----- ------------- - ---------------------------------- -------------- - - -- ------- -------- - --- --------------- ------------ ---- -- - -
writeToFile
参数表示是否将映射文件写入磁盘文件,默认为 true
。如果设置为 false
,则生成的映射文件只会存在于内存中。
使用
webpack-mapping-plugin 会为每个输出的 JS 文件生成一个对应的 .map 文件,例如:
dist ├── myapp.js └── myapp.js.map
生成的 .map 文件格式符合 source map 标准,可以通过 devtools 工具进行调试。如果某个函数或变量在压缩前的位置为 (2, 10),在压缩后的位置为 (1, 20),则我们可以通过 .map 文件定位到压缩前的位置:
//# sourceMappingURL=myapp.js.map function myFunc() { // ... } myFunc(); // Line 1, column 20
示例
假设我们有如下的项目结构:
demo ├── src │ ├── index.js │ └── utils.js ├── package.json ├── webpack.config.js └── yarn.lock
其中,src/index.js
文件:
import { add } from './utils'; function main() { console.log(add(1, 2)); } main();
src/utils.js
文件:
export function add(a, b) { return a + b; }
我们要对这些文件进行打包,并生成映射文件。在 webpack 的配置文件 webpack.config.js
中,可以这样配置:
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------------- - ---------------------------------- -------------- - - ------ ----------------- ------- - ----- ----------------------- -------- --------- ----------- -- -------- ------------- -------- - --- --------------- - --
配置完毕后,在终端中输入 npx webpack
命令进行打包。打包成功后,我们可以在 dist
目录下找到生成的映射文件 bundle.js.map
。我们打开压缩后的 bundle.js
文件,可以看到开头注释中有一个 sourceMappingURL
的字段,这个字段指向了对应的 .map 文件:
//# sourceMappingURL=bundle.js.map !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e; // ...省略
在浏览器的开发者工具中,我们可以找到源代码中的函数或变量,然后通过 .map 文件定位到压缩前的位置,如下图所示:
总结
webpack-mapping-plugin 可以帮助我们自动生成映射文件,方便我们在压缩后的代码中进行调试。它的使用方法也比较简单,在 webpack 的 plugins 中新增一个 MappingPlugin 实例即可。最后,希望这篇教程对大家有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd7a