webpack 使用 uglifyjs 插件转换 css 单元

Question

奇怪，其实我觉得挺容易碰到的，但是我一直没发现这个问题~

我已经使用/不使用 uglifyjs 插件进行了测试，我很确定这个插件会导致这个问题。

我的style文件里只用了px/em，压缩后有一部分px变成了pc/pt，完全没头绪~

Answer 1

尽管 UglifyJS 的名称中有 JS，但它会影响其他加载程序。答案有点隐藏在UglifyJSPlugin docs.

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

关于它的讨论发生在这里：

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

据我所知，尚无解决方法。

我会说只要它不会弄乱你的构建，就继续使用 uglifyJS。启动的时候可以试试

切换到 Babili（基于 babel 的缩小器）+ babili-webpack-plugin。

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

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

并使用 css-loader 最小化选项缩小 CSS。

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)

或

禁用 css-loader 插件中的最小化选项（覆盖 uglifyJS 行为）。不要担心你的 CSSes 会被最小化，只是少一点（在我的例子中）。 - 这比崩溃生产构建更好。

我尝试了 Babili 但没有成功，但第二种选择有助于我项目的生产构建。

webpack 使用 uglifyjs 插件转换 css 单元

webpack convert css unit with uglifyjs plugin

uglifyjs

webpack