README

FAST Integration Webpack Plugin

上传SourceMap文件webpack插件

插件功能

fast-integration-webpack-plugin是基于webpack4开发的webpack插件，为天眼探针定位上报异常在源代码中的确切位置提供source文件和map文件

在webpack中作为插件使用,需要开启项目的sourceMap文件生成选项，插件会根据输出目录递归搜索 .js文件和.js.map文件 .css.map文件

其中，.js文件和.js.map文件会上传到天眼 .css.map文件不会上传，根据插件配置项可以决定插件是否删除输出目录中的 .js.map文件和.css.map文件

提示：避免在开发环境使用该插件,否则由于上传文件可能导致热加载时间过长，在生产环境再启用该插件

配置项

配置	字段类型	说明	是否必填	默认值
hashKey	string	项目唯一标识	是	无
trackerInfoApi	string	获取产品和应用相关信息的接口地址	是	无
sourcemapUploadApi	string	sourcemap文件上传接口地址	是	无
htmlEntryPath	string[]	探针脚本注入的入口html文件路径	是	['index.html']
enableSourcemapUpload	boolean	是否上传sourcemap	否	false
deleteSourcemapAfterUpload	boolean	是否在输出阶段删除.js.map和.css.map文件	否	true
extra_upload_dir	string[]	需要额外上传的文件夹列表,例如,你的项目中,某个文件夹下的资源是单独饮用,未在webpack生命周期中时,可以使用配置好路径 /a/b/c, 上传时将会把/a/b/c下的js、js.map文件上传到天眼	否	[]
force_update	boolean	是否强制上传	否	false
timeout	number	单个文件上传超时时间，默认值300000，5分钟	300000
## 使用

npm i fast-integration-webpack-plugin -D

在webpack中

import path from 'path'; // 需要额外上传某个文件
plugins: [
    new FastIntegrationWebpackPlugin({
      hashKey: {TENANT_PRODUCT_APP_HASHKEY}
      // 探针集成相关参数
      enableTrackerIntergration: true,
      trackerInfoApi: {获取探针版本、类型、配置信息的API地址},
      // 输出目录的入口html文件  例如 dist/index.html  直接填充index.html
      htmlEntryPath: ['index.html'],
      // sourcemap上传相关参数
      enableSourcemapUpload: true,
      sourcemapUploadApi: {上传sourcemap使用的API地址},
      deleteSourcemapAfterUpload: true
      //extra_upload_dir: ['需要额外上传的文件夹绝对路径(path.resolve(__dirname, `路径`))'],该配置只针对需要的人员
    })
]

在umi中 config.js

import FastIntegrationWebpackPlugin from 'fast-integration-webpack-plugin';
import path from 'path';
export default {
  devtool: 'hidden-source-map', // 开启sourcemap
  chainWebpack: config => { // 使用fast-integration-webpack-plugin插件
    config
    .plugin('fast-integration-webpack-plugin') 
    .use(new FastIntegrationWebpackPlugin({
      hashKey: {TENANT_PRODUCT_APP_HASHKEY}
      // 探针集成相关参数
      enableTrackerIntergration: true,
      trackerInfoApi: {获取探针版本、类型、配置信息的API地址},
      // 输出目录的入口html文件  例如 dist/index.html  直接填充index.html
      htmlEntryPath: ['index.html'],
      // sourcemap上传相关参数
      enableSourcemapUpload: true,
      sourcemapUploadApi: {上传sourcemap使用的API地址},
      deleteSourcemapAfterUpload: true
      //extra_upload_dir: ['需要额外上传的文件夹绝对路径(path.resolve(__dirname, `路径`))'],该配置只针对需要的人员
    }))
  },
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    ['umi-plugin-react', {
      ...
    }]
  ],
  hash: true,
  targets: {
    ie: 9
  },
  // 路由配置
  routes: pageRoutes,
  // ANTD主题配色
  theme: {
  },
  // Webpack Configuration
  proxy: {
  }
}

上传时间

上传时间不定，根据当前网络状况决定，存在的文件不会上传(根据文件路径与名称区分,请开启文件名hash)。

注意事项

配置devtool生成sourcemap文件时,如果您的项目需要保留sourcemap文件,那么推荐使用 'source-map' 模式,该模式为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。如果您的项目不需要保留生产的sourcemap文件,推荐使用 'hidden-source-map' 模式,与source-map 相同，但不会为 bundle 添加引用注释。
如果您的项目将css、less、scss文件打包入您的js文件时，请在相关loader中关闭您css、less、scss相关文件的sourcemap生成配置。以防止生成的map文件一并打包入您的js文件中，导致js文件大小超过预期。

例：

{
  loader: 'style-loader',
  options: {
    sourceMap: false
  }
}

由于node对进程的内存分配有默认设置,32位系统 node默认分配内存 0.7g左右,64位系统默认分配内存1.4g左右, 如果项目复杂,在开启souremap生成选项时,打包的时候,可能出现内存不足导致打包失败的情况

例:

<--- Last few GCs --->

[70041:0x103800000]   112100 ms: Mark-sweep 1049.8 (1273.7) -> 1049.7 (1214.2) MB, 427.1 / 0.0 ms  (average mu = 0.618, current mu = 0.000) last resort GC in old space requested
[70041:0x103800000]   112510 ms: Mark-sweep 1049.7 (1214.2) -> 1049.7 (1192.2) MB, 410.3 / 0.0 ms  (average mu = 0.447, current mu = 0.000) last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x36295d35be3d]
Security context: 0x0280a0d9e6e1 <JSObject>
    1: byteLength(aka byteLength) [0x280057866f1] [buffer.js:531] [bytecode=0x280f3e290c1 offset=204](this=0x0280cf7826f1 <undefined>,string=0x028037c8a291 <Very long string[190258200]>,encoding=0x0280a0dbd819 <String[4]: utf8>)
    2: arguments adaptor frame: 3->2
    3: fromString(aka fromString) [0x2800579d2d9] [buffer.js:342] [bytecode=0x280f3e278e1 offs...

解决方案:

配置打包命令时,修改node进程占用内存的大小 --max-old-space-size

例:

package.json

"scripts": {
    "build": " node --max-old-space-size=4096 ./scripts/build.js",
  },

Usage no npm install needed!

README

FAST Integration Webpack Plugin

插件功能

配置项

上传时间

注意事项