webpack3.0 压缩css 但是不在html中引用,webpack怎样压缩css?
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
})
]
};
webpack3.0 压缩css 但是不在html中引用,webpack怎样压缩css?相关推荐
- css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
- 在php中加css_如何使用php脚本给html中引用的js和css路径打上版本号
在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从 ...
- 调整html css表格位置,调整表格中的列宽(CSS / HTML)
我一直在尝试将移动设备上的列宽变为50%,但我尝试过的所有内容都无效.这是css. @media (max-width: 768px) { #customTable tbody { float: le ...
- 微信小程序中裁剪图片以及压缩到指定尺寸并上传
本文分为两个内容,分别是裁剪图片和压缩 引出问题 1.为何要裁剪图片 因为需要上传头像,但是每个型号的手机拍出来的照片尺寸都不太一样,不能统一,所以,希望在上传之前进行自主裁剪,保证上传到服务器上的尺 ...
- html中加hover啥意思,css中hover是什么意思
css中:hover是一个伪类选择器,:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式.:hover选择器适用于所有元素. 要使用css对HTML页面中的元素实现一对一,一对多或者多对一 ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{color:red;font-size:20px; } 2.css建立好后,需要引入 ...
- webpack怎样压缩css?
webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack. webpack可以使用css压缩插件 ...
- html引入css webpack_webpack4(一):基本配置、html和css的处理
1.安装webpack4 npm i webpack@4.44.2 webpack-cli@4.0.0 -D 默认安装完成后只有一个node_modules目录和package.json文件. -S和 ...
- css手型指针_前端基础面试题(HTML+CSS部分)
1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他行内元素:其中im ...
最新文章
- Java 过滤特殊字符的 正则表达式
- C#中String与 StringBuilder 的区别
- python中的operator库
- Swin Transformer对CNN的降维打击
- sql server 2008安装需要一直重启。但重启后又没有达到效果。
- Jamie and Tree[CF916E]
- Linux下kvm:检测硬件是否支持虚拟化
- 【重点】LeetCode 124. Binary Tree Maximum Path Sum
- .net面试问答(大汇总)(转)
- SpringMVC的拦截器Inceptor
- c语言程序设计安卓,C语言编程学习app下载-C语言编程学习 安卓版v2.1.2-PC6安卓网...
- 虚拟网络之Kubernetes Cilium CNI 快速部署实操
- scons构建mdk工程
- mysql inet_aton 原理_mysql 使用inet_aton和inet_ntoa处理ip地址
- 简单了解一些分布式术语,分享给大家
- 编译好的GDAL库,支持ECW格式,支持proj,支持geos
- 6行代码实现对TF卡的读写功能
- outlook不能发邮件0x800CCC80
- STM32F1xx HAL库 中文详解 之 综合概述(一)
- java dao层编写及注释_JAVA代码注释规范