optimize-css-assets-webpack-plug

2020-10-18  本文已影响0人  风向应该可以决定发型吧

optimize-css-assets-webpack-plugin文档

安装

npm i -D optimize-css-assets-webpack-plugin
// webpack 3及以下
npm i -D optimize-css-assets-webpack-plugin@3.2.0 
参数 类型 默认值 描述
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
    }),
  ]
};
上一篇下一篇

猜你喜欢

热点阅读