optimize-css-assets-webpack-plugin

optimize-css-assets-webpack-plugin文档

安装

npm i -D optimize-css-assets-webpack-plugin
// webpack 3及以下
npm i -D [email protected] 

参数	类型	默认值	描述
assetNameRegExp(可选)	RegExp	/.css$/g	此插件压缩的对象是由mini-css-extract-plugin插件输出的css文件,而不是css源文件
cssProcessor(可选)	Function	cssnano	压缩css的处理器,一个函数,接收CSS模块和options参数并返回一个promise对象
cssProcessorOptions(可选)	Object	{}	传递给cssProcessor的配置对象
cssProcessorPluginOptions(可选)	Object	{}	传递给cssProcessor的插件配置对象
canPrint(可选)	Boolean	true	配置插件是否可以将消息打印到控制台

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: MiniCssExtractPlugin.extract('style-loader', 'css-loader')
        loader: MiniCssExtractPlugin.loader,
        options: {publicPath: '/public/path/to/' }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    //new OptimizeCssAssetsPlugin()
    new OptimizeCSSAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true
    }),
  ]
};