https://github.com/lemonpi/issues_webpack_classname
Minimum demo of webpack classname mangling issue
https://github.com/lemonpi/issues_webpack_classname
Last synced: 4 months ago
JSON representation
Minimum demo of webpack classname mangling issue
- Host: GitHub
- URL: https://github.com/lemonpi/issues_webpack_classname
- Owner: LemonPi
- Created: 2018-10-03T01:41:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-11T15:43:03.000Z (about 7 years ago)
- Last Synced: 2025-02-22T18:40:39.682Z (about 1 year ago)
- Language: JavaScript
- Size: 43 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Problem
webpack is mangling class names.
```javascript
export class Test {
constructor() {
this.test = 1;
}
}
Test.name; // should be "Test", but is instead some mangled character like "n"
Test.prototype.constructor.name; // similar to above
```
Test this out with
```
npm run start
```
And use console to evaluate the expressions on the `lib` library.
## Solution
The current webpack configuration solves this issue by explicitly keeping function and class names:
```
optimization: {
minimizer: [
new UglifyJSPlugin({
cache : true,
parallel : true,
uglifyOptions: {
compress: true,
ecma : 6,
keep_fnames: true,
keep_classnames: true,
},
sourceMap : true
})
]
},
```
Although UglifyJS only works on ES5, so we have to pull in Babel as well:
```
module : {
rules: [
{
test : /\.js$/,
include: [/src/],
use : {
loader : 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
]
},
```