webpack4系列教程，如何压缩css里面的空白字符？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、optimize-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的功能。可以参考下面的文章：

• https://newsn.net/say/webpack-chunk.html

配置一，纯粹干净css

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

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

配置二，内联sourcemap

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

配置三，单独sourcemap文件

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

说明

在配置二和配置三中，其实就是增加了两个参数，分别是：inline和annotation。

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

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

• https://newsn.net/say/webpack-css-sourcemap.html

相关链接

• https://newsn.net/say/webpack-css.html
• https://newsn.net/say/webpack-less.html
• https://newsn.net/say/webpack-scss.html
• https://newsn.net/say/webpack-css-sourcemap.html
• https://newsn.net/say/webpack-sourcemap.html
• https://newsn.net/say/webpack-start.html
• https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/53

总结

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

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

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。