You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

143 lines
5.6 KiB

4 years ago
  1. # Adjust Source-map Loader
  2. [![NPM](https://nodei.co/npm/adjust-sourcemap-loader.png)](http://github.com/bholloway/adjust-sourcemap-loader)
  3. Webpack loader that adjusts source maps.
  4. Use as a **loader** to debug source-maps or to adjust source-maps between other loaders.
  5. Use as a **module filename template** to ensure the final source-map are to your liking.
  6. ## Usage : Loader
  7. ``` javascript
  8. require('adjust-sourcemap?format=absolute!babel?sourceMap');
  9. ```
  10. ### Source maps required
  11. Note that **source maps** must be enabled on any preceding loader. In the above example we use `babel?sourceMap`.
  12. ### Apply via webpack config
  13. It is preferable to adjust your `webpack.config` so to avoid having to prefix every `require()` statement:
  14. ``` javascript
  15. module.exports = {
  16. module: {
  17. loaders: [
  18. {
  19. test : /\.js/,
  20. loaders: ['adjust-sourcemap?format=absolute', 'babel?sourceMap']
  21. }
  22. ]
  23. }
  24. };
  25. ```
  26. ## Usage : Module filename template
  27. Specifying a certain format as the final step in a loader chain will **not** influence the final source format that Webpack will output. Instead the format is determined by the **module filename template**.
  28. There are limitations to the filename templating that Webpack provides. This package may also operate as a custom template function that will convert output source-map sources to the desired `format`.
  29. In the following example we ensure project-relative source-map sources are output.
  30. ```javascript
  31. var templateFn = require('adjust-sourcemap-loader')
  32. .moduleFilenameTemplate({
  33. format: 'projectRelative'
  34. });
  35. module.exports = {
  36. output: {
  37. ...
  38. devtoolModuleFilenameTemplate : templateFn,
  39. devtoolFallbackModuleFilenameTemplate: templateFn
  40. }
  41. };
  42. ```
  43. ## Options
  44. As a loader, options may be set using [query parameters](https://webpack.github.io/docs/using-loaders.html#query-parameters) or by using [programmatic parameters](https://webpack.github.io/docs/how-to-write-a-loader.html#programmable-objects-as-query-option). Programmatic means the following in your `webpack.config`.
  45. ```javascript
  46. module.exports = {
  47. adjustSourcemapLoader: {
  48. ...
  49. }
  50. }
  51. ```
  52. Where `...` is a hash of any of the following options.
  53. * **`debug`** : `boolean|RegExp` May be used alone (boolean) or with a `RegExp` to match the resource(s) you are interested in debugging.
  54. * **`fail`** : `boolean` Implies an **Error** if a source-map source cannot be decoded.
  55. * **`format`** : `string` Optional output format for source-map `sources`. Must be the camel-case name of one of the available `codecs`. Omitting the format will result in **no change** and the outgoing source-map will match the incomming one.
  56. * **`root`** : `boolean` A boolean flag that indices that a `sourceRoot` path sould be included in the output map. This is contingent on a `format` being specified.
  57. * **`codecs`** : `Array.<{name:string, decode:function, encode:function, root:function}>` Optional Array of codecs. There are a number of built-in codecs available. If you specify you own codecs you will loose those that are built-in. However you can include them from the `codec/` directory.
  58. Note that **query** parameters take precedence over **programmatic** parameters.
  59. ### Changing the format
  60. Built-in codecs that may be specified as a `format` include:
  61. * `absolute`
  62. * `outputRelative`
  63. * `projectRelative`
  64. * `webpackProtocol`
  65. * `sourceRelative` (works for loader only, **not** Module filename template)
  66. ### Specifying codecs
  67. There are additional built-in codecs that do not support encoding. These are still necessary to decode source-map sources. If you specify your own `options.codecs` then you should **also include the built-in codecs**. Otherwise you will find that some sources cannot be decoded.
  68. The existing codecs may be found in `/codec`, or on the loader itself:
  69. ```javascript
  70. var inBuiltCodecs = require('adjust-sourcemap-loader').codecs,
  71. myCodecs = [
  72. {
  73. name : 'foo',
  74. decode: function(uri) {...},
  75. encode: function(absolute) {...},
  76. root : function() {...}
  77. },
  78. ...
  79. ];
  80. module.exports = {
  81. adjustSourcemapLoader: {
  82. codecs: inBuiltCodecs.concat(myCodecs)
  83. }
  84. }
  85. ```
  86. The codec **order is important**. Those that come first have precedence. Any codec that detects a distinct URI should be foremost so that illegal paths are not encountered by successive codecs.
  87. ### Abstract codecs
  88. A codec that detects generated code and cannot `decode()` a URI to an absolute file path.
  89. Instead of implementing `encode()` or `root()` it should instead specify `abstract:true`. Its `decode()` function then may return `boolean` where it detects such generated sources.
  90. For example, a built-in abstract codec will match the **Webpack bootstrap** code and ensure that its illegal source uri is not encountered by later coders.
  91. ## How it works
  92. The loader will receive a source map as its second parameter, so long as the preceding loader was using source-maps.
  93. The exception is the **css-loader** where the source-map is in the content, which is **not currently supported** .
  94. The source-map `sources` are parsed by applying **codec.decode()** functions until one of them returns an absolute path to a file that exists. The exception is abstract codecs, where the source with remain unchanged.
  95. If a format is specified then the source-map `sources` are recreated by applying the **codec.encode()** function for the stated `format` and (where the `root` option is specified) the **codec.root()** function will set the source-map `sourceRoot`.
  96. If a codec does not specify **codec.encode()** or **codec.root()** then it may **not** be used as the `format`.