webpack 自学笔记 ---4 提取css文件&css兼容&压缩css
乾坤符箓:
提取css文件为单独文件(mini-css-extract-plugin)
css兼容(postcss)
压缩css(optimize-css-assets-webpack-plugin)
1、提取css文件为单独文件
const { resolve } = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry:"./src/index.js", output:{ filename:"build.js", path:resolve(__dirname,"build") }, //loader module:{ rules:[ { test:/\.css$/, use:[ {
loader:MiniCssExtractPlugin.loader, // 原先是"style-loader"(作用:创建style标签,将样式注入);现在是mini-css-extract-plugin(作用:提取js中的css成单独文件!)
options:{
publicPath:"../"
}
}, "css-loader" }, { test:/\.less$/, use:[ {
loader:MiniCssExtarct.loader,
options:{
public:"../"
}
}, "css-loader","less-loader" ] } ] ] }, plugins:[ new HtmlWebpackPlugin({ template:"./src/index.html" }), new MiniCssExtractPlugin({ filename:"css/build.css",//对输出的css文件进行重命名 }) ],
mode:"development" }
附魔:当使用'mini-css-extract-plugin'进行css文件独立打包,使用'url-loader'对css中引用的图片文件等进行打包时,发现:在html中的<img>标签内的图片可以正常显示,但在css中写在background-image中的图片无法正常显示,这也就是我为什么在使用"mini-css-extract-plugin"时增加配置的原因
原先:
MiniCssExtractPlugin.loader => {
loader:MiniCssExtarctPlugin.loader,
options:{
publicPath:"../"
}
}
理由:找不到路径,我们就给它个公共的路径
css兼容处理
依赖:postcss-loader、postcss-preset-env;
postcss-preset-env作用:帮助postcss找到package.json中browerlist里配置,通过配置加载指定的css兼容样式(package.json里面配置需要兼容浏览器的版本)
设置node环境变量:
process.env.NODE_ENV = "development" //(设置即生效)
不设置默认为生产环境
开打开打:
module.exprots = {
...
module:{
rules:[
{
test:/\.css$/,
use:[
{
loader:MiniCssExtract.loader,
options:{
publicPath:"../"
}
},
"css-loader",
{
loader:"postcss-loader",
options:{
postcssOptions:{
ident:"postcss",
plugins:["postcss-preset-env"]
}
}
}
]
}
]
}
}
同时需要配置package.json里面兼容浏览器的版本配置
broswerslist:{
development:[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
],
production:[
">0.2%",
"not dead",
"not op_mini_all"
]
}
打包前:
打包后:
压缩CSS
依赖:optimize-css-assets-webpack-plugin
开打开打:
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
...
plugins:{
...
new OptimizeCssAssetsWebpackPlugin()
}
}
原文地址:https://www.cnblogs.com/lijinxiao/p/15008593.html
- 值得收臧 | 从零开始搭建带GPU加速的深度学习环境(操作系统、驱动和各种机器学习库)
- python接口自动化16-multipart/form-data上传多个附件
- python接口自动化17-响应时间与超时(timeout)
- python+requests+excel接口自动化数据驱动
- python+selenium+requests爬取我的博客粉丝的名称
- python接口自动化21-规范的API接口文档示例
- 自然语言处理(4)之中文文本挖掘流程详解(小白入门必读)
- JMeter断言07
- 编程入门的姿势-5月8日微信群语音分享
- 性能测试必备监控技能jvm之jdk命令行工具篇16
- 性能测试必备监控技能MySQL篇15
- [快学Python3]Number(数字)
- [快学Python3]基础知识
- [快学Python3]开发工具
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 排障集锦:九九八十一难之第七难!mysql数据库登录密码忘记了
- Css实现上下无限跳动
- 排障集锦:九九八十一难之第八难!ERROR 2002 (HY000): Can‘t connect to local MySQL server
- Vue Router配置参数、404页面
- 机器学习之决策树三-CART原理与代码实现
- Vue Router路径切换过渡动画
- 听说Mysql你很豪横?-------------深入解析mysql数据库中的索引!
- 听说Mysql你很豪横?-------------深入解析mysql数据库中的事务!
- Struts2笔记
- Vue Router实现路由嵌套单页面展示
- 排障集锦:九九八十一难之第九难!mysql备份恢复路上的小插曲
- jQuery限制复选框checkbox的选中次数
- jQuery点击切换增加和删除class类
- Vue使用props和emit父子组件通信
- 听说Mysql你很豪横?-------------呕心沥血深入解析mysql备份与恢复!!!