|
| 1 | +--- |
| 2 | +title: EvalSourceMapDevToolPlugin |
| 3 | +contributors: |
| 4 | + - johnnyreilly |
| 5 | + - simon04 |
| 6 | + - kinseyost |
| 7 | +related: |
| 8 | + - title: Building Eval Source Maps |
| 9 | + url: https://survivejs.com/webpack/building/source-maps/#sourcemapdevtoolplugin-and-evalsourcemapdevtoolplugin |
| 10 | +--- |
| 11 | + |
| 12 | +This plugin enables more fine grained control of source map generation. It is an alternative to the [`devtool`](/configuration/devtool/) configuration option. |
| 13 | + |
| 14 | +``` js |
| 15 | +new webpack.EvalSourceMapDevToolPlugin(options) |
| 16 | +``` |
| 17 | + |
| 18 | + |
| 19 | +## Options |
| 20 | + |
| 21 | +The following options are supported: |
| 22 | + |
| 23 | +- `test` (`string|regex|array`): Include source maps for modules based on their extension (defaults to `.js` and `.css`). |
| 24 | +- `include` (`string|regex|array`): Include source maps for module paths that match the given value. |
| 25 | +- `exclude` (`string|regex|array`): Exclude modules that match the given value from source map generation. |
| 26 | +- `filename` (`string`): Defines the output filename of the SourceMap (will be inlined if no value is provided). |
| 27 | +- `append` (`string`): Appends the given value to the original asset. Usually the `#sourceMappingURL` comment. `[url]` is replaced with a URL to the source map file. `false` disables the appending. |
| 28 | +- `moduleFilenameTemplate` (`string`): See [`output.devtoolModuleFilenameTemplate`](/configuration/output/#output-devtoolmodulefilenametemplate). |
| 29 | +- `sourceURLTemplate`: Define the sourceURL default: `webpack-internal:///${module.identifier}` |
| 30 | +- `module` (`boolean`): Indicates whether loaders should generate source maps (defaults to `true`). |
| 31 | +- `columns` (`boolean`): Indicates whether column mappings should be used (defaults to `true`). |
| 32 | +- `protocol` (`string`): Allows user to override default protocol (`webpack-internal://`) |
| 33 | + |
| 34 | +T> Setting `module` and/or `columns` to `false` will yield less accurate source maps but will also improve compilation performance significantly. |
| 35 | + |
| 36 | + |
| 37 | +## Examples |
| 38 | + |
| 39 | +The following examples demonstrate some common use cases for this plugin. |
| 40 | + |
| 41 | +### Exclude Vendor Maps |
| 42 | + |
| 43 | +The following code would exclude source maps for any modules in the `vendor.js` bundle: |
| 44 | + |
| 45 | +``` js |
| 46 | +new webpack.EvalSourceMapDevToolPlugin({ |
| 47 | + filename: '[name].js.map', |
| 48 | + exclude: ['vendor.js'] |
| 49 | +}) |
| 50 | +``` |
| 51 | + |
| 52 | +### Setting sourceURL |
| 53 | + |
| 54 | +Set a URL for source maps. Useful for avoiding cross-origin issues such as: |
| 55 | + |
| 56 | +``` bash |
| 57 | +A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information. |
| 58 | +``` |
| 59 | +
|
| 60 | +The option can be set to a function: |
| 61 | +
|
| 62 | +``` js |
| 63 | +new webpack.EvalSourceMapDevToolPlugin({ |
| 64 | + sourceURLTemplate: module => `/${module.identifier}` |
| 65 | +}) |
| 66 | +``` |
| 67 | +
|
| 68 | +Or a substition string: |
| 69 | +
|
| 70 | +``` js |
| 71 | +new webpack.EvalSourceMapDevToolPlugin({ |
| 72 | + sourceURLTemplate: '[all-loaders][resource]' |
| 73 | +}) |
| 74 | +``` |
| 75 | +
|
| 76 | +
|
0 commit comments