webpack 怎么压缩 index.html 里面引入的css文件

Question

react 项目 目录结构如下

public 
    |-index.html
    |-theme.css

index.html 中引入了 theme.css
现在想在 webpack 打包的时候 自动压缩css 能实现吗？

Answer 1

要引入插件 optimize-css-assets-webpack-plugin
optimize-css-assets-webpack-plugin

一般来说不需要复杂的配置

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

plugins: [
    new OptimizeCssAssetsPlugin()
]

Answer 2

通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独文件，通过 css-loader 的 minimize 选项开启 cssnano 压缩 CSS。