Webpack 中 CSS 壓縮插件

Optimize CSS Assets Webpack Plugin
一個優化減少CSS資源的Webpack插件。
該插件有什麼作用？

它將在Webpack構建期間搜索CSS資源，並將優化最小化CSS（默認情況下，它使用cssnano，但可以指定自定義CSS處理器）。

解決了extract-text-webpack-plugin CSS重複問題：

由於extract-text-webpack-plugin僅捆綁（合並）文本塊，如果它用於捆綁CSS，則捆綁包可能具有重複的條目（塊可以是重複的，但是當合並時，可以創建重複的CSS）。

安裝：

 npm install save-dev optimize-css-assets-webpack-plugin

注意：對於webpack v3或更低版本，請使用optimize-css-assets-webpack-plugin@3.2.0。 optimize-css-assets-webpack-plugin@4.0.0及以上版本支持webpack v4。
參數：
該插件可以接收以下選項（所有這些都是可選的）：

assetNameRegExp：一個正則表達式，指示應優化最小化的資產的名稱。提供的正則表達式針對配置中ExtractTextPlugin實例導出的文件的文件名運行，而不是源CSS文件的文件名。默認為/.css$/g

cssProcessor：用於優化最小化CSS的CSS處理器，默認為cssnano。這應該是一個跟隨cssnano.process接口的函數（接收CSS和選項參數並返回一個Promise）。

cssProcessorOptions：傳遞給cssProcessor的選項，默認為{}

canPrint：一個布爾值，指示插件是否可以將消息打印到控制台，默認為true

實例：

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
 module: {
 rules: [
 {
 test: /.css$/,
 loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
 }
 ]
 },
 plugins: [




 new ExtractTextPlugin('styles.css'),
 new OptimizeCssAssetsPlugin({
 assetNameRegExp: /.optimize.css$/g,
 cssProcessor: require('cssnano'),
 cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
 canPrint: true
 })
 ]
};

原文地址： https://www.npmjs.com/package/optimize-css-assets-webpack-plugin