webpackcss的处理机制,也是五花八门,令人目不暇接。在本文中,苏南大叔描述另外一个webpackoptimize,主要功能就是对css文件的内的空白字符以及折行之类的进行处理。

苏南大叔:webpack4系列教程,如何压缩css里面的空白字符? - webpack-optimize-css
webpack4系列教程,如何压缩css里面的空白字符?(图6-1)

本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0optimize-css-assets-webpack-plugin@5.0.3。因为是要压缩css空白字符了,所以,必然会带来css的可读性变差的问题。所以,一般是在production模式下使用这个功能。

安装依赖项目

命令行如下:

npm i optimize-css-assets-webpack-plugin -D

optimize-css-assets-webpack-plugin的配置项目,是放在optimize节点里面的,另外一个类似的功能是:分离公共css的功能。可以参考下面的文章:

苏南大叔:webpack4系列教程,如何压缩css里面的空白字符? - webpack-optimize-css-plugin
webpack4系列教程,如何压缩css里面的空白字符?(图6-2)

配置一,纯粹干净css

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
    mode: 'production', // 环境
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin()
        ],
        //...
    },
}

这种配置下,所有的css文件都没有空白字符及折行了。但是,sourcemap也丢失了!所以,这个事情,就是仁者见仁智者见智了。如果你还需要sourcemap,那么就继续查看下面的配置!

苏南大叔:webpack4系列教程,如何压缩css里面的空白字符? - webpack-optimize-css-1
webpack4系列教程,如何压缩css里面的空白字符?(图6-3)

配置二,内联sourcemap

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
    mode: 'production', // 环境
    optimization: {
        minimizer: [
             new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    map: {
                        inline: true,
                        annotation: true
                    }
                }
            })
        ],
        //...
    },
}

苏南大叔:webpack4系列教程,如何压缩css里面的空白字符? - webpack-optimize-css-2
webpack4系列教程,如何压缩css里面的空白字符?(图6-4)

配置三,单独sourcemap文件

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
    mode: 'production', // 环境
    optimization: {
        minimizer: [
             new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    map: {
                        inline: false,
                        annotation: true
                    }
                }
            })
        ],
        //...
    },
}

苏南大叔:webpack4系列教程,如何压缩css里面的空白字符? - webpack-optimize-css-3
webpack4系列教程,如何压缩css里面的空白字符?(图6-5)

说明

在配置二和配置三中,其实就是增加了两个参数,分别是:inlineannotation

  • annotation,苏南大叔建议大家设置为true,因为它是给sourcemap增加更详细的报错信息的。所以,留着总是比没有好。对吧?
  • inline,内联true的话,就是sourcemapcss文件里面。false的话,就是单独生成sourcemap文件。

苏南大叔:webpack4系列教程,如何压缩css里面的空白字符? - webpack-optimize-css-4
webpack4系列教程,如何压缩css里面的空白字符?(图6-6)

另外,大家可能也注意到了。这两个参数,可以取代devtool设置。那么,是不是就解决了,在下面的链接中,苏南大叔担心的,cssjssourcemap冲突的问题呢?

相关链接

总结

本文的主要任务是压缩css文件中的空白字符,次要任务是在一定条件下,保留sourcemap。苏南大叔目前的想法是:webpack的配置,真TMD复杂啊...

更多webpack的配置文章,请点击苏南大叔的博客文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: