Webpack removes class names when minimizing / charring ES6 code with inheritance:
There is an MVCE code that we are trying to minimize / angle:
Child class :
const ParentClass = require('parent');
class Child extends ParentClass{
constructor(){
super();
}
}
module.exports = Child;
index.js which cause the Childclass to be called :
const Child = require('./classes_so/child');
let child = new Child();
console.log(child.constructor.name);
Module Parent Inside node_modules:
class Parent {
constructor() {
if (this.constructor.name === 'Parent'){
throw new TypeError("Parent class is abstract - cant be instance");
}
}
}
module.exports = Parent;
I will publish all the output to the end of the question, here I want to publish only the corresponding lines, which, I think, cause the wrong behavior (lines 33-37 from the original output):
n.exports = class extends r {
constructor() {
super();
}
};
class extends r: class extends r? , , , ? keep_classnames , .
:
- Webpack: 3.11.0 ( 4, )
- uglifyjs-webpack-plugin: 1.2.4 ( )
- NodeJS: v6.9.1 v8.9.1 ( )
- , : webpack-uglify-
1:
webpack.config.js:
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
const fs = require('fs');
const nodeModules = {};
const localDependencies = ['.bin'];
fs.readdirSync('node_modules')
.filter(function (x) {
return localDependencies.indexOf(x) === -1;
})
.forEach(function (mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
try {
module.exports = {
target: 'node',
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: true,
__dirname: true
},
entry: './index_so.js',
output: {
path: path.join(__dirname, 'build'),
filename: 'index.js'
},
externals: nodeModules,
plugins: [
new webpack.IgnorePlugin(/\.(css|less)$/),
new webpack.BannerPlugin({
banner: 'require("source-map-support").install();',
raw: true,
entryOnly: false
})
],
devtool: 'sourcemap',
module: {
loaders: [
{test: /\.json$/, loader: "json-loader"}
]
},
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
},
keep_classnames: false,
mangle: true,
output: {
beautify: true
}
}
})
]
};
}
catch (e) {
console.error(e);
}
/ :
!function(n) {
var t = {};
function e(r) {
if (t[r]) return t[r].exports;
var o = t[r] = {
i: r,
l: !1,
exports: {}
};
return n[r].call(o.exports, o, o.exports, e), o.l = !0, o.exports;
}
e.m = n, e.c = t, e.d = function(n, t, r) {
e.o(n, t) || Object.defineProperty(n, t, {
configurable: !1,
enumerable: !0,
get: r
});
}, e.n = function(n) {
var t = n && n.__esModule ? function() {
return n.default;
} : function() {
return n;
};
return e.d(t, "a", t), t;
}, e.o = function(n, t) {
return Object.prototype.hasOwnProperty.call(n, t);
}, e.p = "", e(e.s = 0);
}([ function(n, t, e) {
let r = new (e(1))();
console.log(r.constructor.name);
}, function(n, t, e) {
const r = e(2);
n.exports = class extends r {
constructor() {
super();
}
};
}, function(n, t) {
n.exports = require("parent");
} ]);