https://github.com/sormy/webpack-source-map-fix-plugin
Webpack Source Map Fix Plugin
https://github.com/sormy/webpack-source-map-fix-plugin
Last synced: about 1 month ago
JSON representation
Webpack Source Map Fix Plugin
- Host: GitHub
- URL: https://github.com/sormy/webpack-source-map-fix-plugin
- Owner: sormy
- License: mit
- Created: 2016-09-14T02:12:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-09-17T04:15:46.000Z (over 8 years ago)
- Last Synced: 2025-03-11T05:46:39.860Z (2 months ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license.txt
Awesome Lists containing this project
README
# Webpack Source Map Fix Plugin #
## DEPRECATION NOTICE ##
The same or even better effect could be reached without this plugin
if you will use alternative webpack configuration for `devtoolModuleFilenameTemplate`:
```javascript
modules.exports = {
...
output: {
...
devtoolModuleFilenameTemplate: function (info) {
var relPath = info.resourcePath
.replace(/^.*(~|node_modules)/, '~')
.replace(/^(webpack:\/\/\/)+/, '')
.replace(/^\.\//, '')
.replace(/^\(webpack\)-/, '(webpack)/')
.replace(/^webpack\/bootstrap/, '(webpack)/bootstrap');
return 'webpack:///' + relPath + '?' + info.hash;
}
}
...
};
```
## Why? ##
Have you ever seen source map paths like below?
- webpack:///./~/bla-bla-bla
- webpack:///./bla-bla-bla
- webpack:///~/bla-bla-bla
- webpack:///webpack:///bla-bla-bla
- webpack:///~/bla-bla-bla/~/bla-bla-bla
- webpack:///(webpack)-bla-bla-bla
- webpack:///(webpack)/bla-bla-bla
- webpack:///webpack/bootstrap bla-bla-bla
This plugin performs a trivial fix on source map path to normalize path:
```javascript
var relPath = path
.replace(/^.*~/, '~')
.replace(/^(webpack:\/\/\/)+/, '')
.replace(/^\.\//, '')
.replace(/^\(webpack\)-/, '(webpack)/')
.replace(/^webpack\/bootstrap/, '(webpack)/bootstrap');
return 'webpack:///' + relPath + '?' + info.hash;
```
- `/~/` is well know alias for node_modules when css import is used
- `/./` is relative to root import
- `webpack:///webpack:///` comes from buggy url rewrite engine
## Usage ##
```shell
npm install webpack-source-map-fix-plugin --save-dev
```
webpack.config.js:
```javascript
...
var SourceMapFixPlugin = require('webpack-source-map-fix-plugin');
module.exports = {
...
devtool: 'source-map',
...
plugins: [
...
new SourceMapFixPlugin()
];
...
}
```
## Limitations ##
Current verson will work only if source maps are bundled in separate files.