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。启动的时候可以试试

1. 切换到 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)

或

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

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