1 | <div align="center">
|
2 | <a href="https://github.com/webpack/webpack">
|
3 | <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
|
4 | </a>
|
5 | </div>
|
6 |
|
7 | [![npm][npm]][npm-url]
|
8 | [![node][node]][node-url]
|
9 | [![deps][deps]][deps-url]
|
10 | [![tests][tests]][tests-url]
|
11 | [![coverage][cover]][cover-url]
|
12 | [![chat][chat]][chat-url]
|
13 | [![size][size]][size-url]
|
14 |
|
15 | # source-map-loader
|
16 |
|
17 | Extracts source maps from existing source files (from their <code>sourceMappingURL</code>).
|
18 |
|
19 | ## Getting Started
|
20 |
|
21 | To begin, you'll need to install `source-map-loader`:
|
22 |
|
23 | ```bash
|
24 | npm i -D source-map-loader
|
25 | ```
|
26 |
|
27 | Then add the plugin to your `webpack` config. For example:
|
28 |
|
29 | **file.js**
|
30 |
|
31 | ```js
|
32 | import css from "file.css";
|
33 | ```
|
34 |
|
35 | **webpack.config.js**
|
36 |
|
37 | ```js
|
38 | module.exports = {
|
39 | module: {
|
40 | rules: [
|
41 | {
|
42 | test: /\.js$/,
|
43 | enforce: "pre",
|
44 | use: ["source-map-loader"],
|
45 | },
|
46 | ],
|
47 | },
|
48 | };
|
49 | ```
|
50 |
|
51 | The `source-map-loader` extracts existing source maps from all JavaScript entries.
|
52 | This includes both inline source maps as well as those linked via URL.
|
53 | All source map data is passed to webpack for processing as per a chosen [source map style](https://webpack.js.org/configuration/devtool/) specified by the `devtool` option in [webpack.config.js](https://webpack.js.org/configuration/).
|
54 | This loader is especially useful when using 3rd-party libraries having their own source maps.
|
55 | If not extracted and processed into the source map of the webpack bundle, browsers may misinterpret source map data. `source-map-loader` allows webpack to maintain source map data continuity across libraries so ease of debugging is preserved.
|
56 | The `source-map-loader` will extract from any JavaScript file, including those in the `node_modules` directory.
|
57 | Be mindful in setting [include](https://webpack.js.org/configuration/module/#rule-include) and [exclude](https://webpack.js.org/configuration/module/#rule-exclude) rule conditions to maximize bundling performance.
|
58 |
|
59 | And run `webpack` via your preferred method.
|
60 |
|
61 | ## Options
|
62 |
|
63 | | Name | Type | Default | Description |
|
64 | | :-----------------------------------------------------: | :----------: | :---------: | :--------------------------------------------- |
|
65 | | **[`filterSourceMappingUrl`](#filtersourcemappingurl)** | `{Function}` | `undefined` | Allows to control `SourceMappingURL` behaviour |
|
66 |
|
67 | ### filterSourceMappingUrl
|
68 |
|
69 | Type: `Function`
|
70 | Default: `undefined`
|
71 |
|
72 | Allows you to specify the behavior of the loader for `SourceMappingURL` comment.
|
73 |
|
74 | The function must return one of the values:
|
75 |
|
76 | - `true` or `'consume'` - consume the source map and remove `SourceMappingURL` comment (default behavior)
|
77 | - `false` or `'remove'` - do not consume the source map and remove `SourceMappingURL` comment
|
78 | - `skip` - do not consume the source map and do not remove `SourceMappingURL` comment
|
79 |
|
80 | Example configuration:
|
81 |
|
82 | **webpack.config.js**
|
83 |
|
84 | ```js
|
85 | module.exports = {
|
86 | module: {
|
87 | rules: [
|
88 | {
|
89 | test: /\.js$/,
|
90 | enforce: "pre",
|
91 | use: [
|
92 | {
|
93 | loader: "source-map-loader",
|
94 | options: {
|
95 | filterSourceMappingUrl: (url, resourcePath) => {
|
96 | if (/broker-source-map-url\.js$/i.test(url)) {
|
97 | return false;
|
98 | }
|
99 |
|
100 | if (/keep-source-mapping-url\.js$/i.test(resourcePath)) {
|
101 | return "skip";
|
102 | }
|
103 |
|
104 | return true;
|
105 | },
|
106 | },
|
107 | },
|
108 | ],
|
109 | },
|
110 | ],
|
111 | },
|
112 | };
|
113 | ```
|
114 |
|
115 | ## Examples
|
116 |
|
117 | ### Ignoring Warnings
|
118 |
|
119 | To ignore warnings, you can use the following configuration:
|
120 |
|
121 | **webpack.config.js**
|
122 |
|
123 | ```js
|
124 | module.exports = {
|
125 | module: {
|
126 | rules: [
|
127 | {
|
128 | test: /\.js$/,
|
129 | enforce: "pre",
|
130 | use: ["source-map-loader"],
|
131 | },
|
132 | ],
|
133 | },
|
134 | ignoreWarnings: [/Failed to parse source map/],
|
135 | };
|
136 | ```
|
137 |
|
138 | More information about the `ignoreWarnings` option can be found [here](https://webpack.js.org/configuration/other-options/#ignorewarnings)
|
139 |
|
140 | ## Contributing
|
141 |
|
142 | Please take a moment to read our contributing guidelines if you haven't yet done so.
|
143 |
|
144 | [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
145 |
|
146 | ## License
|
147 |
|
148 | [MIT](./LICENSE)
|
149 |
|
150 | [npm]: https://img.shields.io/npm/v/source-map-loader.svg
|
151 | [npm-url]: https://npmjs.com/package/source-map-loader
|
152 | [node]: https://img.shields.io/node/v/source-map-loader.svg
|
153 | [node-url]: https://nodejs.org
|
154 | [deps]: https://david-dm.org/webpack-contrib/source-map-loader.svg
|
155 | [deps-url]: https://david-dm.org/webpack-contrib/source-map-loader
|
156 | [tests]: https://github.com/webpack-contrib/source-map-loader/workflows/source-map-loader/badge.svg
|
157 | [tests-url]: https://github.com/webpack-contrib/source-map-loader/actions
|
158 | [cover]: https://codecov.io/gh/webpack-contrib/source-map-loader/branch/master/graph/badge.svg
|
159 | [cover-url]: https://codecov.io/gh/webpack-contrib/source-map-loader
|
160 | [chat]: https://badges.gitter.im/webpack/webpack.svg
|
161 | [chat-url]: https://gitter.im/webpack/webpack
|
162 | [size]: https://packagephobia.now.sh/badge?p=source-map-loader
|
163 | [size-url]: https://packagephobia.now.sh/result?p=source-map-loader
|