Webpack 4 学习08(压缩优化css)

压缩css,去除注释

  • 安装插件

    npm install --save-dev optimize-css-assets-webpack-plugin
  • 配置webpack.config.js
    • 头部引入插件

      const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") ` 
    参数 意义
    assetNameRegExp 正则表达式,用于匹配需要优化或者压缩的资源名。默认值是
    /.css$/g
    cssProcessor 用于压缩和优化CSS 的处理器,默认是 cssnano.
    cssProcessorPluginOptions 传递给cssProcessor的插件选项,默认为{}
    canPrint 表示插件能够在console中打印信息,默认值是true
    discardComments 去除注释
    • plugins模块引入
     new OptimizeCssAssetsPlugin({
           assetNameRegExp:/\.css$/g,
           cssProcessor:require("cssnano"),
           cssProcessorPluginOptions:{
             preset:['default',{discardComments:{removeAll:true}}]
           },
           canPrint:true
         })

  • 运行打包命令之后就可以压缩

    webpack --mode development

原文地址:https://www.cnblogs.com/hunterxing/p/10425296.html

时间: 2024-10-08 00:02:38

Webpack 4 学习08(压缩优化css)的相关文章

Webpack 4 学习05(打包css)

webpack 自身只理解 JavaScript, 想让 webpack 能够去处理那些非 JavaScript 文件,我们将使用到loader loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理. 安装loader npm install style-loader css-loader --save-dev 配置loader 在webpack.config.js文件里配置module中的rules,如下:

Google Pagespeed,自动压缩优化JS/CSS/Image

Google Pagespeed,自动压缩优化JS/CSS/Image 浏览:257 发布日期:2015/07/05 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Image 这个周末,把服务器的Nginx升级了下,并加入了Google Pagespeed模块 效果很明显: 页面加载的多个JS.CSS会自动合并压缩处理 发现新版本的Pagespeed能很好的发现处理用户加载的第三方JS库,如jQuery 发现新版本的lazyload_imag

DIV CSS优化 CSS压缩技巧教程

DIV CSS优化 DIVCSS5为大家介绍简单的CSS优化.涉及优化内容:CSS代码优化.CSS重用优化.缩短字符.删除换行等处优化 目录 CSS样式单词简写优化 标点符号优化 删除换行 CSS重用优化 CSS代码优化简写总结 一.CSS样式属性单词代码简写优化 - TOP 1.border(CSS边框)简写: 1).4个边边框宽度为1px,颜色为#000 border-color:#000; border-style:solid; border-width:1px 可以简写为:体感音乐放松椅

Webpack 4 学习07(提取分离打包css)

前面讲过 将css文件引入到js文件中,然后一起打包成js文件,现在我们学习单独提取分离css并且打包. 安装插件min-css-extract-plugin npm install mini-css-extract-plugin --save-dev 配置webpack.config.js 引入插件 const MiniCssPlugin = require("mini-css-extract-plugin"); rules 设置 { test:/\.css$/, use:[Mini

WebPack实例与前端性能优化

[前端构建]WebPack实例与前端性能优化 计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 构建工具层出不穷.多多益处(提

区域及分离、Js压缩、css、jquery扩展

后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱佛脚.深圳最近的天气反常,许多人感冒了,我也成为其中之一,大家注意身体... 这一篇,我来简单的讲一下接下来项目中会用到的一些杂七杂八的技术. 区域及分离 在15.ASP.NET MVC入门到精通——MVC-路由中,我已经简要说明了区域的分离.

Webpack 4 学习09(打包生成html)

所需插件 html-webpack-plugin 本教程基于已经搭建好的webpack环境,详见Webpack 4 学习01(基础配置) **了解html-webpack-plugin** HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件. 安装依赖 npm install html-webpack-plugin --save-dev 配置webpack.config.js文件 在头部定义常量,引入插件 const H

爬虫学习 08.Python网络爬虫之图片懒加载技术、selenium和PhantomJS

爬虫学习 08.Python网络爬虫之图片懒加载技术.selenium和PhantomJS 引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -*- import requests from lxml import

JavaScript学习08 Cookie对象

JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据). Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取. Cookie文件的格式: NS:Cookie.txt IE:用户名@域名.txt 有两种类型的cookie: (1)持久性cookie,会被存