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
|
---|