30.webpack压缩处理CSS方法

53 阅读1分钟

webpack生产模式可以压缩处理app.js和html但不会压缩CSS文件,需要单独配置

  1. 安装插件
npm insta1l optimize-css-assets-webpack-plugin -D
  1. webpack.config.js引入插件
const optimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
  1. 配置插件
plugins: [
    new optimizeCssAssetsPlugin({
        // 配置
        cssProcessorPluginOptions: {
            // 适用所有默认压缩配置,移除所有注释
            preset: ['default', { discardComments: {removeAll: true} }],
        },
    })
]
  1. 运行
npm run build // yarn build

此时在打包文件build中输出压缩后的css文件
以上就是webpack生产环境的配置,可以生成打包后的文件