美文网首页
optimize-css-assets-webpack-plug

optimize-css-assets-webpack-plug

作者: 风向应该可以决定发型吧 | 来源:发表于2020-10-18 22:45 被阅读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
        }),
      ]
    };
    

    相关文章

      网友评论

          本文标题:optimize-css-assets-webpack-plug

          本文链接:https://www.haomeiwen.com/subject/iqpmyktx.html