webpack前端一个工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack

webpack可以使用css压缩插件Optimize css Assets webpack Plugin来压缩css文件。

 

该插件有什么作用?

它将在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

参数:

该插件可以接收以下选项(所有这些都是可选的):

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
    })
  ]
};

 

Logo

前往低代码交流专区

更多推荐