在Webpack 5 中如何进行 CSS 常用配置?
本文摘要:主要通过实操讲解运用Webpack 5 CSS常用配置的方法步骤
前文已谈到可以通过配置 css-loader
和 style-loader
,使 webpack5 具有处理 CSS 资源的能力。css-loader 首先会分析出各个 CSS文件之间的关系,把各个CSS文件合并为一大段 CSS,然后将 CSS 文件编译为 CommonJS 模块,并把该模块引入到 JS 中。紧接着 style-loader 会从 JS 中提取出刚才引入的编译后的 CSS,在页面的 header 中创建 style
标签,并插入该css。
1 提取 CSS 文件
上述配置打包后的资源,在浏览器中运行时,首先会加载 JS 文件,之后才会创建 style
标签来插入样式,很多情况下会出现闪屏现场,导致用户体验不好。这时候可通过配置 mini-css-extract-plugin
插件来提升用户体验,该插件可以提取出独立的 CSS 文件,通过 link 标签加载样式。
插件官网:https://webpack.js.org/plugins/mini-css-extract-plugin/
1.1 安装依赖
安装 mini-css-extract-plugin
为开发依赖:
yarn add mini-css-extract-plugin -D
1.2 修改 webpack 配置
修改 webpack.config.js 文件:
1)引入插件:
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
2)修改 loader 配置:将 module.rules 中所有 style-loader
替换为该插件提供的loader:MiniCssExtractPlugin.loader,如:
//...
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.s[ca]ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
]
},
{
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'stylus-loader'
]
},
//...
]
},
//...
3)添加插件配置:在 plugins
中添加该插件
plugins: [
// ...
new MiniCssExtractPlugin({
filename: 'css/index.css'
})
],
1.3 测试运行
执行 yarn build
打包,打包成功后:
1)查看输出目录 dist
,该目录中新增了 css/index.css
2)在浏览器中运行 dist/index.html
,在 Elements
中可看到 link 标签引入 css/index.css
文件:
2 CSS 兼容性处理
由于浏览器碎片化严重,需要进行 CSS 兼容性的处理。如果手动编写各种兼容样式,工作量较大,可使用 postcss-loader
来实现 CSS 的兼容性。官网:https://webpack.js.org/loaders/postcss-loader/#autoprefixer
2.1 安装依赖
postcss-loader
依赖于 postcss
。post-css 有大量的配置,我们可以使用它的预设 postcss-preset-env
,该预设包括了 autoprefixer
等。
yarn add postcss-loader postcss postcss-preset-env -D
2.2 修改 webpack 配置
1)在 webpack.config.js 中定义通用的 postcss-loader 配置:
const commonPostcssLoader = {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env'
]
}
}
}
2)在每个css相关的loader配置中添加上面定义的loader。注意,上面定义的 commonPostcssLoader 需要在 css-loader
之前执行,在 css 预处理器的loader(sass-loader / less-loader / stylus-loader)之后执行:
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
commonPostcssLoader
]
},
{
test: /\.s[ca]ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
commonPostcssLoader,
'sass-loader',
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
commonPostcssLoader,
'less-loader',
]
},
{
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
commonPostcssLoader,
'stylus-loader'
]
},
// ...
]
2.3 添加 .browserslistrc 文件
在项目根目录下创建 .browserslistrc
文件,该文件告诉 postcss-loader 需要支持的浏览器。可以在控制台中执行命令 npx browserslist
查看浏览器版本:
在实践中,.browserslistrc
我通常写如下内容:
> 1%
last 10 version
not dead
上述配置表示:占有率大于1%、并且最新的10个版本、并且存在的浏览器。
为了测试 CSS 兼容性,此处暂时将该文件内容修改为占有率大于0.001:
> 0.001%
2.4 测试运行
1)在 src/style/css/css-demo.css
文件中添加一个需要兼容性处理的 css 代码:
h1 {
border-radius: 10px;
}
2)执行打包命令 yarn build
(对应为 webpack
命令)
3)打包成功,查看生成的 dist/css/index.css
文件,可发现做了兼容性处理:
3 CSS 压缩处理
上面打包后提取出来的 index.css
并没有进行压缩,通常在生产环境尽量要压缩文件。webpack 提供了插件 css-minimizer-webpack-plugin
压缩 CSS 文件。
官网:https://webpack.js.org/plugins/css-minimizer-webpack-plugin
3.1 安装依赖
yarn add css-minimizer-webpack-plugin -D
3.2 修改 webpack 配置
1)引入插件
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
2)在 plugins
中添加插件
plugins: [
// ....
new CssMinimizerWebpackPlugin()
],
3.3 测试运行
执行打包命令 yarn build
,查看打包生成的 dist/css/index.css
文件,可看到该文件已经被压缩。
今日优雅哥(youyacoder)学习结束,期待关注留言分享~~
在Webpack 5 中如何进行 CSS 常用配置?的更多相关文章
- CentOS7中防火墙的一些常用配置
# 启动 systemctl start firewalld # 查看状态 systemctl status firewalld # 停止关闭 systemctl disable firewalld ...
- Webpack 2 视频教程 011 - Webpack2 中加载 CSS 的相关配置与实战
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- webpack中加载CSS
webpack强大之处在于可以将CSS当做一个资源模块进行管理和加载 基本使用: 安装webpack的加载插件style-loader和css-loader: npm install style-lo ...
- webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- webpack项目在开发环境中使用静态css文件
webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...
- webpack常用配置总结
1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...
- webpack 学习4 使用loader 以及常用的一些loader
webpack本身只支持处理JavaScript,其他的文件,如css img less是不识别的,所以才会有loader这个东西,它就是可以使webpack能够处理其他非js文件的拓展程序 首先我们 ...
- vue第二单元(webpack的配置-学习webpack的常用配置)
第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
随机推荐
- C++进阶-3-5-set/multiset容器
C++进阶-3-5-set/multiset容器 1 #include<iostream> 2 #include<set> 3 using namespace std; 4 5 ...
- nslookup:command not found的解决办法
nslookup:command not found的解决办法 通过nslookup查看DNS记录,在这里遇到了一个小插曲,nslookup:command not found(未找到命令),是因为新 ...
- Unity-Adressable打包热更
Addressable是Unity推出的打ab包方案,自动依赖: 不需要手动写AB打包方案,不需要关心依赖; 提供本地远程服务异步加载: 打包粒度可调节: 1.Group Addressable打包需 ...
- 面试突击49:说一下 JUC 中的 Exchange 交换器?
Exchange(交换器)顾名思义,它是用来实现两个线程间的数据交换的,它诞生于 JDK 1.5,它有两个核心方法: exchange(V x):等待另一个线程到达此交换点,然后将对象传输给另一个线程 ...
- CoaXPress 线缆和接插件的设计要求
本文的原理部分内容不仅适用于CoaXPress 协议,也同样适用于其它高速信号传输情形.在高速.低干扰信号传输时,线缆和接插件的选取是非常讲究的,我们在实际应用中经常会遇到线缆原因.阻抗匹配原因导致的 ...
- 如何使用picGo+typora配置云笔记
PicGo的使用 安装 picGo 2.3版本 (window可用)---官网有点慢,已经下载到个人仓库 https://gitee.com/lht1132950411/study/blob/mast ...
- freeswitch使用mod_shout模块播放mp3
概述 freeswitch 在对VOIP语音通话中,可以通过playback命令播放IVR语音文件. 默认情况下,freeswitch支持wav文件,也可以直接播放VOIP中常见编解码的G711文件. ...
- 「洛谷 P3834」「模板」可持久化线段树 题解报告
题目描述 给定n个整数构成的序列,将对于指定的闭区间查询其区间内的第k小值. 输入输出格式 输入格式 第一行包含两个正整数n,m,分别表示序列的长度和查询的个数. 第二行包含n个整数,表示这个序列各项 ...
- 2020.12.12【NOIP提高B组】模拟 总结
第一次来 B 组做,虚的很 T1: 容斥原理 比赛时也打了个大致,但挂了,只有 50 分. 赛后重构了一下代码,AC \(UPDATE:2020/12/13\ \ \ 14:10\) 思路: 像前缀和 ...
- ExtJS 布局-Accordion布局(Accordion layout)
更新记录: 2022年6月2日 开始. 2022年6月3日 发布. 1.说明 accordion(手风琴)布局一次仅显示一个子组件,内置支持 折叠 和 展开.当需要堆叠多个子组件,并每次只显示一次时, ...