SourceMapDevToolPlugin

이 플러그인을 사용하면 소스맵 생성을 더욱더 세밀하게 제어 할 수 있습니다. 이 플러그인은 devtool의 설정 옵션을 통해 자동으로 활성화됩니다.

new webpack.SourceMapDevToolPlugin(options);

Options

다음과 같은 옵션이 제공됩니다.

• test (string RegExp function (asset) => boolean [string, RegExp, function (asset) => boolean]): 확장자에 따라 소스맵을 포함합니다. (기본값은 .js, .mjs 및 .css).

• include (string RegExp function (asset) => boolean [string, RegExp, function (asset) => boolean]): 값과 일치하는 경로의 소스맵을 포함합니다.

• exclude (string RegExp function (asset) => boolean [string, RegExp], function (asset) => boolean): 값과 일치하는 모듈을 소스맵 생성에서 제외합니다.

• filename (string): 소스맵의 파일 이름을 정의합니다 (값이 제공되지 않으면 인라인으로 설정됩니다).

• append (string function false): 기존 애셋에 값을 추가합니다. 일반적으로 #sourceMappingURL 주석이 사용됩니다. [url]은 소스맵 파일의 URL로 대체됩니다. Webpack v4.36.0부터는 [chunk], [filename] 및 [contenthash]와 같은 경로 파라미터가 지원됩니다. false로 설정하면 값 추가가 비활성화됩니다.

  버전 5.84.0부터 webpack은 경로와 애셋 정보 객체를 인수로 받아들이고 문자열을 반환하는 'append' 옵션을 허용합니다.

  Copy

  (pathData: PathData, assetInfo?: AssetInfo) => string;

• moduleFilenameTemplate (string): output.devtoolModuleFilenameTemplate을 참고하세요.

• fallbackModuleFilenameTemplate (string): 위 링크를 참고하세요.

• ignoreList (string RegExp function (source) => boolean [string, RegExp, function (source) => boolean]): 소스 맵에서 지정된 값과 일치하는 소스 파일을 무시할지 여부를 결정합니다.

• module = true (boolean): 로더가 소스 맵을 생성해야 하는지 여부를 나타냅니다.

• columns = true (boolean): 열 매핑을 사용해야 하는지 여부를 나타냅니다.

• namespace (string): DevTools에서 여러 WebPack 루트를 허용하는 네임스페이스 접두사입니다. output.devtoolNamespace를 참고하세요.

• noSources = false (boolean): 소스 파일 콘텐츠가 소스 맵에 포함되지 않도록 합니다.

• publicPath (string): 공개 경로 접두사가 있는 절대 URL을 생성합니다(예: https://example.com/project/).

• fileContext (string): [file] 인수를 이 디렉터리를 기준으로 합니다.

• sourceRoot (string): SourceMap의 sourceRoot 속성에 사용자 지정 값을 제공합니다.

• debugIds (boolean): true로 설정하면 소스 및 소스맵에서 고유 ID가 생성되어 여러 빌드에서 소스맵을 식별하는 데 도움이 됩니다. 자세한 내용은 TC39 소스맵 디버그 ID 제안을 참고하세요.

fileContext 옵션은 ../../가 절대 [url]에 나타나지 않도록 상위 디렉터리에 소스맵을 저장하려는 경우에 유용합니다.

Examples

다음은 이 플러그인의 몇 가지 일반적인 사용 사례입니다.

Basic Use Case

다음 코드를 사용하여 설정 옵션 devtool: inline-source-map을 커스텀 플러그인 설정으로 동등하게 바꿀 수 있습니다.

export default {
  // ...
  devtool: false,
  plugins: [new webpack.SourceMapDevToolPlugin({})],
};

Exclude Vendor Maps

다음 코드는 vendor.js 번들 내 모듈의 소스맵을 제외합니다.

new webpack.SourceMapDevToolPlugin({
  filename: "[file].map[query]",
  exclude: ["vendor.js"],
});

Host Source Maps Externally

소스맵의 URL을 설정하세요. 인증이 필요한 호스트에 호스팅하는 데 유용합니다.

new webpack.SourceMapDevToolPlugin({
  append: "\n//# sourceMappingURL=https://example.com/sourcemap/[url]",
  filename: "[file].map[query]",
});

소스맵이 상위 디렉터리에 저장되는 경우,

project
|- dist
  |- public
    |- bundle-[hash].js
  |- sourcemaps
    |- bundle-[hash].js.map

다음과 같이 설정하면

new webpack.SourceMapDevToolPlugin({
  filename: "sourcemaps/[file].map",
  publicPath: "https://example.com/project/",
  fileContext: "public",
});

다음 URL을 생성합니다.

https://example.com/project/sourcemaps/bundle-[hash].js.map