webpack 4 uglifyjs not minifying and compressing
I am using webpack 4 and I am unsure if my code is being compressed and minified. I am using React as well.
My first problem is using the Webpack UglifyJS plugin in the webpack plugin property or the optimization property. When I use the plugin property it seems to compress at least but not to a single line. I am still unsure if it is minifying. When I use optimization it does not even compress. When I take a look at my bundled js file, it seems to be bundling things in node_modules such as webpack.
//works with plugin
module.exports = {
...
plugins: [new UglifyJsPlugin({
test: /.js$/,
exclude: /node_modules/,
sourceMap: true,
uglifyOptions: {
compress: {},
mangle: true,
}
}],
//does not work with optimization
module.exports = {
...
optimization: {
minimize: true,
minimizer: [new UglifyJsPlugin({
test: /.js$/,
exclude: /node_modules/,
sourceMap: true,
uglifyOptions: {
compress: {},
mangle: true,
}
}],
}
With the first example, the code gets compressed at least but not into one single line.
//Example
!*** ./node_modules/scheduler/index.js ***!
*****************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('nnif (false) {} else {n...
!*** ./node_modules/scheduler/tracing.js ***!
*******************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('nnif (false) {...
Also not sure if it being minified. I wrote a function in my React Component
someFunc(one, two) {
return one + two
}
According to the npm uglifyjs docs, this should be minified into
someFunc(a, b) { n return a+bn}
but it is being output as
someFunc(one, two) { n return one + twon}
Is this minifying?
javascript reactjs webpack uglifyjs
asked Nov 25 '18 at 8:10
henhenhenhen
127112
add a comment |
I am using webpack 4 and I am unsure if my code is being compressed and minified. I am using React as well.
My first problem is using the Webpack UglifyJS plugin in the webpack plugin property or the optimization property. When I use the plugin property it seems to compress at least but not to a single line. I am still unsure if it is minifying. When I use optimization it does not even compress. When I take a look at my bundled js file, it seems to be bundling things in node_modules such as webpack.
//works with plugin
module.exports = {
...
plugins: [new UglifyJsPlugin({
test: /.js$/,
exclude: /node_modules/,
sourceMap: true,
uglifyOptions: {
compress: {},
mangle: true,
}
}],
//does not work with optimization
module.exports = {
...
optimization: {
minimize: true,
minimizer: [new UglifyJsPlugin({
test: /.js$/,
exclude: /node_modules/,
sourceMap: true,
uglifyOptions: {
compress: {},
mangle: true,
}
}],
}
With the first example, the code gets compressed at least but not into one single line.
//Example
!*** ./node_modules/scheduler/index.js ***!
*****************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('nnif (false) {} else {n...
!*** ./node_modules/scheduler/tracing.js ***!
*******************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('nnif (false) {...
Also not sure if it being minified. I wrote a function in my React Component
someFunc(one, two) {
return one + two
}
According to the npm uglifyjs docs, this should be minified into
someFunc(a, b) { n return a+bn}
but it is being output as
someFunc(one, two) { n return one + twon}
Is this minifying?
javascript reactjs webpack uglifyjs
asked Nov 25 '18 at 8:10
henhenhenhen
127112
Maybe you should switch toterser-webpack-plugin. uglify-js doesn't support ES6+ features and uglify-es is no longer maintained. So if you will run into issues, you are on your own.
– Hardik Modha
Nov 25 '18 at 8:17
I am aiming to minify the transpiled JS code that runs through my webpack loaders. Basically I want to minify the bundle js file which should be es5
– henhen
Nov 25 '18 at 8:34
add a comment |
I am using webpack 4 and I am unsure if my code is being compressed and minified. I am using React as well.
My first problem is using the Webpack UglifyJS plugin in the webpack plugin property or the optimization property. When I use the plugin property it seems to compress at least but not to a single line. I am still unsure if it is minifying. When I use optimization it does not even compress. When I take a look at my bundled js file, it seems to be bundling things in node_modules such as webpack.
//works with plugin
module.exports = {
...
plugins: [new UglifyJsPlugin({
test: /.js$/,
exclude: /node_modules/,
sourceMap: true,
uglifyOptions: {
compress: {},
mangle: true,
}
}],
//does not work with optimization
module.exports = {
...
optimization: {
minimize: true,
minimizer: [new UglifyJsPlugin({
test: /.js$/,
exclude: /node_modules/,
sourceMap: true,
uglifyOptions: {
compress: {},
mangle: true,
}
}],
}
With the first example, the code gets compressed at least but not into one single line.
//Example
!*** ./node_modules/scheduler/index.js ***!
*****************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('nnif (false) {} else {n...
!*** ./node_modules/scheduler/tracing.js ***!
*******************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('nnif (false) {...
Also not sure if it being minified. I wrote a function in my React Component
someFunc(one, two) {
return one + two
}
According to the npm uglifyjs docs, this should be minified into
someFunc(a, b) { n return a+bn}
but it is being output as
someFunc(one, two) { n return one + twon}
Is this minifying?
javascript reactjs webpack uglifyjs
asked Nov 25 '18 at 8:10
henhenhenhen
127112
I am using webpack 4 and I am unsure if my code is being compressed and minified. I am using React as well.
My first problem is using the Webpack UglifyJS plugin in the webpack plugin property or the optimization property. When I use the plugin property it seems to compress at least but not to a single line. I am still unsure if it is minifying. When I use optimization it does not even compress. When I take a look at my bundled js file, it seems to be bundling things in node_modules such as webpack.
//works with plugin
module.exports = {
...
plugins: [new UglifyJsPlugin({
test: /.js$/,
exclude: /node_modules/,
sourceMap: true,
uglifyOptions: {
compress: {},
mangle: true,
}
}],
//does not work with optimization
module.exports = {
...
optimization: {
minimize: true,
minimizer: [new UglifyJsPlugin({
test: /.js$/,
exclude: /node_modules/,
sourceMap: true,
uglifyOptions: {
compress: {},
mangle: true,
}
}],
}
With the first example, the code gets compressed at least but not into one single line.
//Example
!*** ./node_modules/scheduler/index.js ***!
*****************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('nnif (false) {} else {n...
!*** ./node_modules/scheduler/tracing.js ***!
*******************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('nnif (false) {...
Also not sure if it being minified. I wrote a function in my React Component
someFunc(one, two) {
return one + two
}
According to the npm uglifyjs docs, this should be minified into
someFunc(a, b) { n return a+bn}
but it is being output as
someFunc(one, two) { n return one + twon}
Is this minifying?
javascript reactjs webpack uglifyjs
javascript reactjs webpack uglifyjs
asked Nov 25 '18 at 8:10
henhenhenhen
127112
asked Nov 25 '18 at 8:10
henhenhenhen
127112
asked Nov 25 '18 at 8:10
henhenhenhen
127112
asked Nov 25 '18 at 8:10
henhenhenhen
127112
asked Nov 25 '18 at 8:10
henhenhenhen
127112
127112
Maybe you should switch toterser-webpack-plugin. uglify-js doesn't support ES6+ features and uglify-es is no longer maintained. So if you will run into issues, you are on your own.
– Hardik Modha
Nov 25 '18 at 8:17
I am aiming to minify the transpiled JS code that runs through my webpack loaders. Basically I want to minify the bundle js file which should be es5
– henhen
Nov 25 '18 at 8:34
add a comment |
Maybe you should switch toterser-webpack-plugin. uglify-js doesn't support ES6+ features and uglify-es is no longer maintained. So if you will run into issues, you are on your own.
– Hardik Modha
Nov 25 '18 at 8:17
I am aiming to minify the transpiled JS code that runs through my webpack loaders. Basically I want to minify the bundle js file which should be es5
– henhen
Nov 25 '18 at 8:34
Maybe you should switch to
terser-webpack-plugin. uglify-js doesn't support ES6+ features and uglify-es is no longer maintained. So if you will run into issues, you are on your own.– Hardik Modha
Nov 25 '18 at 8:17
Maybe you should switch to
terser-webpack-plugin. uglify-js doesn't support ES6+ features and uglify-es is no longer maintained. So if you will run into issues, you are on your own.– Hardik Modha
Nov 25 '18 at 8:17
I am aiming to minify the transpiled JS code that runs through my webpack loaders. Basically I want to minify the bundle js file which should be es5
– henhen
Nov 25 '18 at 8:34
I am aiming to minify the transpiled JS code that runs through my webpack loaders. Basically I want to minify the bundle js file which should be es5
– henhen
Nov 25 '18 at 8:34
add a comment |
1 Answer
1
active
oldest
votes
Webpack 4 does optimization and minification by default in production mode.
So if my guess is right, your configuration is development configuration.
You can remove your explicit UglifyJsPlugin definition and set the mode to production and Webpack will take care of everything.
mode: 'production',
plugins: [...],
optimization: ...
You can customize your optimizations though if you must. But setting the mode to production will yield you your expected results.
More info here
Webpack 4 mode usage
answered Nov 25 '18 at 10:07
Dinesh PandiyanDinesh Pandiyan
2,6921927
Yes, I just found that out as well. Thanks you
– henhen
Nov 25 '18 at 11:08
@henhen If this answer helped you solve your problem, mark it as accepted answer. It will help others who stumble across similar problems.
– Dinesh Pandiyan
Nov 25 '18 at 11:13
Okay thanks. But my original questions were still not answered. Since the option to use webpack uglifyJS exists and can be used with theoptimizationproperty, I don't see or am unsure if it is minifying or why its not being compressed.
– henhen
Nov 25 '18 at 20:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53465730%2fwebpack-4-uglifyjs-not-minifying-and-compressing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Webpack 4 does optimization and minification by default in production mode.
So if my guess is right, your configuration is development configuration.
You can remove your explicit UglifyJsPlugin definition and set the mode to production and Webpack will take care of everything.
mode: 'production',
plugins: [...],
optimization: ...
You can customize your optimizations though if you must. But setting the mode to production will yield you your expected results.
More info here
Webpack 4 mode usage
answered Nov 25 '18 at 10:07
Dinesh PandiyanDinesh Pandiyan
2,6921927
Yes, I just found that out as well. Thanks you
– henhen
Nov 25 '18 at 11:08
@henhen If this answer helped you solve your problem, mark it as accepted answer. It will help others who stumble across similar problems.
– Dinesh Pandiyan
Nov 25 '18 at 11:13
Okay thanks. But my original questions were still not answered. Since the option to use webpack uglifyJS exists and can be used with theoptimizationproperty, I don't see or am unsure if it is minifying or why its not being compressed.
– henhen
Nov 25 '18 at 20:38
add a comment |
Webpack 4 does optimization and minification by default in production mode.
So if my guess is right, your configuration is development configuration.
You can remove your explicit UglifyJsPlugin definition and set the mode to production and Webpack will take care of everything.
mode: 'production',
plugins: [...],
optimization: ...
You can customize your optimizations though if you must. But setting the mode to production will yield you your expected results.
More info here
Webpack 4 mode usage
answered Nov 25 '18 at 10:07
Dinesh PandiyanDinesh Pandiyan
2,6921927
Yes, I just found that out as well. Thanks you
– henhen
Nov 25 '18 at 11:08
@henhen If this answer helped you solve your problem, mark it as accepted answer. It will help others who stumble across similar problems.
– Dinesh Pandiyan
Nov 25 '18 at 11:13
Okay thanks. But my original questions were still not answered. Since the option to use webpack uglifyJS exists and can be used with theoptimizationproperty, I don't see or am unsure if it is minifying or why its not being compressed.
– henhen
Nov 25 '18 at 20:38
add a comment |
Webpack 4 does optimization and minification by default in production mode.
So if my guess is right, your configuration is development configuration.
You can remove your explicit UglifyJsPlugin definition and set the mode to production and Webpack will take care of everything.
mode: 'production',
plugins: [...],
optimization: ...
You can customize your optimizations though if you must. But setting the mode to production will yield you your expected results.
More info here
Webpack 4 mode usage
answered Nov 25 '18 at 10:07
Dinesh PandiyanDinesh Pandiyan
2,6921927
Webpack 4 does optimization and minification by default in production mode.
So if my guess is right, your configuration is development configuration.
You can remove your explicit UglifyJsPlugin definition and set the mode to production and Webpack will take care of everything.
mode: 'production',
plugins: [...],
optimization: ...
You can customize your optimizations though if you must. But setting the mode to production will yield you your expected results.
More info here
Webpack 4 mode usage
answered Nov 25 '18 at 10:07
Dinesh PandiyanDinesh Pandiyan
2,6921927
answered Nov 25 '18 at 10:07
Dinesh PandiyanDinesh Pandiyan
2,6921927
answered Nov 25 '18 at 10:07
Dinesh PandiyanDinesh Pandiyan
2,6921927
answered Nov 25 '18 at 10:07
Dinesh PandiyanDinesh Pandiyan
2,6921927
2,6921927
Yes, I just found that out as well. Thanks you
– henhen
Nov 25 '18 at 11:08
@henhen If this answer helped you solve your problem, mark it as accepted answer. It will help others who stumble across similar problems.
– Dinesh Pandiyan
Nov 25 '18 at 11:13
Okay thanks. But my original questions were still not answered. Since the option to use webpack uglifyJS exists and can be used with theoptimizationproperty, I don't see or am unsure if it is minifying or why its not being compressed.
– henhen
Nov 25 '18 at 20:38
add a comment |
Yes, I just found that out as well. Thanks you
– henhen
Nov 25 '18 at 11:08
@henhen If this answer helped you solve your problem, mark it as accepted answer. It will help others who stumble across similar problems.
– Dinesh Pandiyan
Nov 25 '18 at 11:13
Okay thanks. But my original questions were still not answered. Since the option to use webpack uglifyJS exists and can be used with theoptimizationproperty, I don't see or am unsure if it is minifying or why its not being compressed.
– henhen
Nov 25 '18 at 20:38
Yes, I just found that out as well. Thanks you
– henhen
Nov 25 '18 at 11:08
Yes, I just found that out as well. Thanks you
– henhen
Nov 25 '18 at 11:08
@henhen If this answer helped you solve your problem, mark it as accepted answer. It will help others who stumble across similar problems.
– Dinesh Pandiyan
Nov 25 '18 at 11:13
@henhen If this answer helped you solve your problem, mark it as accepted answer. It will help others who stumble across similar problems.
– Dinesh Pandiyan
Nov 25 '18 at 11:13
Okay thanks. But my original questions were still not answered. Since the option to use webpack uglifyJS exists and can be used with the
optimization property, I don't see or am unsure if it is minifying or why its not being compressed.– henhen
Nov 25 '18 at 20:38
Okay thanks. But my original questions were still not answered. Since the option to use webpack uglifyJS exists and can be used with the
optimization property, I don't see or am unsure if it is minifying or why its not being compressed.– henhen
Nov 25 '18 at 20:38
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53465730%2fwebpack-4-uglifyjs-not-minifying-and-compressing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Maybe you should switch to
terser-webpack-plugin. uglify-js doesn't support ES6+ features and uglify-es is no longer maintained. So if you will run into issues, you are on your own.– Hardik Modha
Nov 25 '18 at 8:17
I am aiming to minify the transpiled JS code that runs through my webpack loaders. Basically I want to minify the bundle js file which should be es5
– henhen
Nov 25 '18 at 8:34