面试题：CSS中CSSNano压缩工具的基础配置

Question

请描述在一个简单的前端项目中，如何对CSSNano进行基础配置，以实现CSS代码的压缩。假设项目使用的是Webpack构建工具，简要说明配置步骤及相关依赖的安装。

Answer 1

1. 安装相关依赖：
   • 首先确保项目已初始化且安装了webpack和webpack - cli。
   • 安装css - loader和style - loader，它们用于在Webpack中处理CSS文件。

     npm install css - loader style - loader --save - dev
     

   • 安装cssnano及其对应的Webpack插件cssnano - webpack - plugin。

     npm install cssnano cssnano - webpack - plugin --save - dev
     

2. Webpack配置：
   • 在webpack.config.js文件中，找到或添加module.rules数组，用于配置模块加载规则。
   • 添加一个处理CSS文件的规则：

   module.exports = {
       //...其他配置
       module: {
           rules: [
               {
                   test: /\.css$/,
                   use: [
                      'style - loader',
                       'css - loader'
                   ]
               }
           ]
       },
       plugins: [
           new (require('cssnano - webpack - plugin'))({
               preset: 'default'
           })
       ]
   };
   

   • 在上述配置中，css - loader负责解析CSS文件，style - loader将CSS插入到DOM中。cssnano - webpack - plugin插件使用cssnano对CSS进行压缩，preset: 'default'使用默认的压缩预设配置。

这样配置后，Webpack在构建项目时会使用cssnano对CSS代码进行压缩。