SourceMapDevToolPlugin

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

newwebpack.SourceMapDevToolPlugin(options);

Options

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

test (stringRegExp[string, RegExp]): 확장자에 따라 소스맵을 포함합니다. (기본값은.js,.mjs 및.css).
include (stringRegExp[string, RegExp]): 값과 일치하는 경로의 소스맵을 포함합니다.
exclude (stringRegExp[string, RegExp]): 값과 일치하는 모듈을 소스맵 생성에서 제외합니다.
filename (string): 소스맵의 파일 이름을 정의합니다 (값이 제공되지 않으면 인라인으로 설정됩니다).
append (stringfunctionfalse): 기존 애셋에 값을 추가합니다. 일반적으로#sourceMappingURL 주석이 사용됩니다.[url]은 소스맵 파일의 URL로 대체됩니다. Webpack v4.36.0부터는[chunk],[filename] 및[contenthash]와 같은 경로 파라미터가 지원됩니다.false로 설정하면 값 추가가 비활성화됩니다.
버전 5.84.0부터 webpack은 경로와 애셋 정보 객체를 인수로 받아들이고 문자열을 반환하는 'append' 옵션을 허용합니다.
```
(pathData: PathData, assetInfo?: AssetInfo)=>string;
```
moduleFilenameTemplate (string):output.devtoolModuleFilenameTemplate를 참고하세요.
fallbackModuleFilenameTemplate (string): 위 링크를 참고하세요.
namespace (string):output.devtoolNamespace를 참고하세요.
module = true (boolean): 로더가 소스맵을 생성해야 하는지 여부를 나타냅니다.
columns = true (boolean): 열 매핑을 사용해야 하는지 여부를 나타냅니다.
noSources = false (boolean): 소스의 내용이 소스맵에 포함되지 않도록 합니다.
publicPath (string): public path 접두사와 함께 절대 URL을 내보냅니다. (예:https://example.com/project/)
fileContext (string): 이 디렉터리를 기준으로[file] 인수를 만듭니다.
sourceRoot (string): 소스맵의sourceRoot 프로퍼티에 커스텀 값을 제공합니다.
debugIds (boolean):true이면 소스 및 소스맵에서 고유한 ID를 발행하여 여러 빌드에서 소스 맵을 식별하는 것이 간소화됩니다. 자세한 내용은TC39 소스맵 디버깅 ID 제안서를 참고하세요.

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

tip

module 또는columns를false로 설정하면 소스맵의 정확도가 떨어지지만, 컴파일 성능이 크게 향상됩니다.

tip

development mode에서 이 플러그인에 대한 설정을 커스텀 하고 싶다면 기본 설정값을 비활성화해야 합니다. 즉,devtool: false로 설정해야 합니다.

warning

webpackminimizer의 기본값이 재정의된 경우 (TerserPlugin 옵션 커스텀 등으로 인해), 소스맵 지원을 활성화하려면sourceMap: true로 설정해야 합니다.

Examples

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

Basic Use Case

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

module.exports={// ...  devtool:false,  plugins:[newwebpack.SourceMapDevToolPlugin({})],};

Exclude Vendor Maps

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

newwebpack.SourceMapDevToolPlugin({  filename:'[file].map[query]',  exclude:['vendor.js'],});

Host Source Maps Externally

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

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

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

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

다음과 같이 설정하면

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

다음 URL을 생성합니다.

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

7 Contributors

Translators

Eunbin-Kim

Movatterモバイル変換