프로젝트 빌드 과정에서 SourceMap 업로드하기¶

 npm install @cloudcare/webpack-plugin --D

// ....
const { SourceMapUploadWebpackPlugin } = require("@cloudcare/webpack-plugin")
module.exports = ({ mode }) => ({
  //.....
  devtool: "hidden-source-map",
  plugins: [
    //.....
    new SourceMapUploadWebpackPlugin({
      applicationId: "xxxxx", //  Guance 애플리케이션 appid
      apiKey: "xxxxxxxx", // open apikey
      server: "https://console.xxx-xxx.cn",
      filepaths: ["dist/"], // 검색할 디렉터리, 파일 또는 파일 디렉터리 가능
      logLevel: "verbose", // 로그 출력 레벨, 필수 아님
      root: "dist/", // 상대 경로를 계산할 디렉터리 설정, 필수 아님
      env: "production", // Guance 애플리케이션의 env, 필수 아님
      version: "1.0.0", // Guance 애플리케이션의 version, 필수 아님
    }),
  ],
})

interface Options {
  /**
   *
   * sourcemap을 검색할 파일/디렉터리.
   * "extensions 구성" 목록과 일치하지만 "ignore 구성"과 일치하지 않는 모든 파일이 검색됩니다.
   * sourcemap JSON 또는 `//#sourceMappingURL=` 주석을 통해 생성된 파일 + 소스 맵 쌍을 찾은 후 소스 맵이 업로드됩니다.
   */
  filepaths: Array<string> | string

  /**
   * Guance 플랫폼에서 생성된 openApi Key입니다. 생성 방법은 (https://docs.guance.com/ko/management/api-key/open-api/#_1)을 참조하세요.
   */
  apiKey: string

  /**
   * Guance 플랫폼 OpenAPI 서비스
   */
  server: string
  /**
   * Guance RUM 애플리케이션에 해당하는 applicationId(필수)
   */
  applicationId: string
  /**
   * Guance RUM 애플리케이션에 해당하는 version(필수 아님)
   */
  version?: string
  /**
   * Guance RUM 애플리케이션에 해당하는 env(필수 아님)
   */
  env?: string

  /**
   * 조건에 맞는 모든 파일 목록을 찾지만 파일을 업로드하지는 않습니다. 디버깅에 사용할 수 있습니다.
   */
  dryRun?: boolean

  /**
   * 업로드 후 발견된 모든 소스 맵 파일을 삭제합니다.
   */
  deleteAfterUpload?: boolean
  /**
   * 소스 맵이 sourceMappingURL을 통해 생성된 파일과 일치하지 않는 경우, 로컬 디스크의 파일 이름을 통해 일치를 시도합니다.
   */
  matchSourcemapsByFilename: ?boolean

  /**
   * 디렉터리에서 검색할 파일 확장자 목록
   * 기본값 [".js", ".map"].
   */
  extensions?: Array<string>

  /**
   * 무시할 파일 목록
   */
  ignore?: Array<string>

  /**
   * 상대 경로를 계산할 디렉터리를 설정합니다. sourcemaps 업로드의 상대 경로는 오류가 발생한 경로에 포함되어야 합니다. 따라서
   * 이 매개변수의 의미는 업로드할 상대 디렉터리를 제어하는 것입니다.
   * 기본값은 실행 디렉터리에서 검색 디렉터리까지의 상대 경로인 path.relative(process.cwd(), filepath)입니다.
   */
  root?: string
  /**
   * 디버깅 시 사용되며, 생성되는 로그의 레벨입니다.
   */
  logLevel?: "quiet" | "normal" | "verbose"
  /**
   * 실행 실패 시 오류를 무시할지 여부입니다. 이 설정을 사용하면 오류가 발생해도 컴파일 프로세스가 중단되지 않습니다. 기본값은 false이며, 기본적으로 오류가 정상적으로 발생합니다.
   */
  warnOnFailure?: boolean
}

 const { SourceMapUploadWebpackPlugin } = require('@cloudcare/webpack-plugin')
 = require('@cloudcare/webpack-plugin')

module.exports = {
  // Ensure that Webpack has been configured to output sourcemaps,
  // but without the `sourceMappingURL` references in buidl artifacts.
  devtool: 'hidden-source-map',
  // ...
  plugins: [
    // Enable our plugin to upload the sourcemaps once the build has completed.
    // This assumes NODE_ENV is how you distinguish production builds. If that
    // is not the case for you, you will have to tweak this logic.
    process.env.NODE_ENV === 'production'
      ? [
          new SourceMapUploadWebpackPlugin({
            ...
            deleteAfterUpload: true,
            matchSourcemapsByFilename: true,
          }),
        ]
      : [],
  ],
}