Search code examples
webpackuglifyjs

webpack convert css unit with uglifyjs plugin

It's weird, actually, I think it is quite easy to come across, but I have found nothing about this issue~

I have tested with / without uglifyjs plugin, and I'm quite sure that this plugin results in this issue.

In my style files, only px / em have been used, but after compression, some of px has been converted to pc / pt, totally have no clue~

enter image description here

Solution

  • Even though UglifyJS has JS in name it affects other loaders. The answer is somewhat hidden in the UglifyJSPlugin docs.

    Minimize all JavaScript output of chunks. Loaders are switched into minimizing mode. (...)

    The discussion about it takes place here:

    https://github.com/webpack/webpack/issues/283

    No workaround yet as I see.

    I would say as long as it doesn't mess your build, keep using uglifyJS. When it starts, you can try

    1. Switching to Babili (babel based minifier) + babili-webpack-plugin.

      https://babeljs.io/blog/2016/08/30/babili

      https://www.npmjs.com/package/babili-webpack-plugin

      and minifying your CSS with css-loader minimize option.

    From https://github.com/webpack/css-loader :

    You can also disable or enforce minification with the minimize query 

    parameter.

require("css-loader?minimize!./file.css") (enforced)
require("css-loader?-minimize!./file.css") (disabled)

    or

    1. Disabling minimize option in css-loader plugin (overwriting uglifyJS behavior). Don't worry your CSSes will be minimized, just bit less (in my case). - better this than crashing production build.

    I tried Babili without success but second option helped in production build of my project.