Webpack 4 - How to configure minimize?
Solution 1
It's not possible to modify the default configuration.
You can use the optimization.minimizer
setting to instantiate your own UglifyJsPlugin
, however. Using 4.0 we used this example to get source maps even when mode
is set to 'production'
for example (no longer necessary as of 4.1.1):
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
}
};
Solution 2
Without adding uglifyjs-webpack-plugin
, you can just add this to the end of your webpack.prod.config.js file:
optimization: {
minimize: false
}
Solution 3
You can try this
npm install uglifyjs-webpack-plugin --save-dev
webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
Solution 4
Just run:
yarn add uglifyjs-webpack-plugin --dev
Reference: Alfonso Pérez answer
Solution 5
For those coming behind me, realized this misleading error was not related to my correct webpack config, but actually, the offline-plugin
was out of date and causing this issue. It needed to be upgraded. See github issue: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/234#issuecomment-369134047
Comments
-
csvan over 2 years
Webpack 4 comes with the following statement:
Error:
webpack.optimize.UglifyJsPlugin
has been removed, please useconfig.optimization.minimize
instead.Fair enough, but I cannot find any information about configuring the UglifyJsPlugin instance running under the hood, for example to change the cache directory. Can this be done?
-
connexo about 6 yearsWasn't webpack 4 supposed to be zero conf?
-
csvan about 6 yearsThis requires me to instantiate the plugin though, I just want to modify existing configuration.
-
csvan about 6 yearsThanks, but I am looking to modify the default configuration.
-
Beau about 6 years@csvan not possible to configure it, have to instantiate your own to specify a custom configuration
-
Beau about 6 years@connexo I think the example shown above will be unneeded at some point and that the goal is still zero conf but it's not quite there yet! for reference re: this specific example: github.com/webpack/webpack/issues/6614
-
Pierre Trollé about 6 yearsI did what you said and I got an Error:
ReferenceError: UglifyJsPlugin is not defined
-
Beau about 6 years@PierreTrollé sorry; I've just added the
require
line to the example :) -
Alfonso Embid-Desmet about 6 yearsAnd keep in mind you might need to do
yarn add uglifyjs-webpack-plugin --dev
;) -
Beau about 6 years@Karolis correct, as far as I know the docs are not up to date for Webpack 4.x... this information come from a GitHub issue.
-
Beau about 6 yearsand here; search for "optimization.minimizer" on this page: medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
-
Beau about 6 yearsone of the GH issues that document this: github.com/webpack/webpack/issues/6879
-
Beau about 6 years@AlfonsoPérez webpack already installs
uglifyjs-webpack-plugin
as a dependency -
Lazerbrains over 4 yearsI am having this same issue. Just updated from Webpack 3 to 4. When i try to build, it starts but fails at the webpack with the error stated above. I have tried the solution above to no avail. Doesn't fix it, and doesn't give me a different error. Where should this be implemented?
-
Mr5o1 over 3 yearsdoes this answer the question? OP is asking how to configure the plugin, not disable it?
-
vir us over 2 years@Mr5o1 stackoverflow is a public community and the OP is not the only person looking at the answers. Google landed me here because the question was related to my search and this answer is a perfectly valid one which helped me resolve my concern. And I'm not the only one like that. I don't really get those types of comments.