本文摘要:主要通过实操讲解运用Webpack 5 CSS常用配置的方法步骤

前文已谈到可以通过配置 css-loaderstyle-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 常用配置?的更多相关文章

  1. CentOS7中防火墙的一些常用配置

    # 启动 systemctl start firewalld # 查看状态 systemctl status firewalld # 停止关闭 systemctl disable firewalld ...

  2. Webpack 2 视频教程 011 - Webpack2 中加载 CSS 的相关配置与实战

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  3. webpack中加载CSS

    webpack强大之处在于可以将CSS当做一个资源模块进行管理和加载 基本使用: 安装webpack的加载插件style-loader和css-loader: npm install style-lo ...

  4. webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  5. webpack项目在开发环境中使用静态css文件

    webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...

  6. webpack常用配置总结

    1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...

  7. webpack 学习4 使用loader 以及常用的一些loader

    webpack本身只支持处理JavaScript,其他的文件,如css img less是不识别的,所以才会有loader这个东西,它就是可以使webpack能够处理其他非js文件的拓展程序 首先我们 ...

  8. vue第二单元(webpack的配置-学习webpack的常用配置)

    第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...

  9. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

随机推荐

  1. 520,用Python定制你的《本草纲目女孩》

    摘要:让我们来用Python定制出心仪的"本草纲目女孩",敲出魔性的代码舞蹈,520,准备好心仪女孩的舞蹈视频,把这份别出心裁的礼物给TA 本文分享自华为云社区<[云驻共创] ...

  2. linux篇-linux修改网卡名(亲测有效)

    1查看网卡ip addr 2cd /etc/sysconfig/network-scripts Ls查看 3mv ifcfg-eno16777736 ifcfg-eth0重命名,然后编辑 最后一行加入 ...

  3. C# 通关手册(持续更新......)

    String 常用静态方法 string.Compare(string str1,string str2,bool ignoreCase) 按照字典顺序比较字符串 当str1 > str2时,返 ...

  4. Activate-or-Not:learning-customized-activation

    关于activate-or-Not的PPT paper code step1 step2 step3 step4 step5 step6 step7 step8 step9 step10

  5. cuda在ubuntu的安装使用分享

    前言 之前给大家分享过opencv在jetson nano 2gb和ubuntu设备中使用并且展示了一些人脸识别等的小demo.但是对于图像处理,使用gpu加速是很常见 .(以下概念介绍内容来自百科和 ...

  6. 【动态规划】统计蚂蚁 (ants)

    题目 描述 蚂蚁山上有T(1<=T<=1,000)种蚂蚁,标记为1..T,每种蚂蚁有N_i只蚂蚁(1<=N_i<=100),现有A(A<=5000)只蚂蚁,从中选出S,S ...

  7. Canal-监听数据库表的变化

    1. 简介 Canal是阿里巴巴旗下的一款开源项目,纯Java开发.基于数据库增量日志解析,提供增量数据订阅&消费功能. 工作原理 Mysql主备复制原理 MySQL master 将数据变更 ...

  8. FICO 常用事务码

    1.SAP配置流程 1.定义,定义组织,概念,比如FI中定义公司代码,会计科目表,年度变式.SAP中有大量的定义过程. 2.分配,把会计科目表/公司/年度变式等参数分配到公司代码,逻辑组织,基本实现框 ...

  9. 国外价值10K+美金的Python面试题,珍藏已久,含泪放了出来

    兄弟们,没吹牛皮,一哥们在国外面试的时候,就是要他做的这个,直接给他说,做出来了给你15K(单位是刀),做不出来就拜拜~ 大兄弟当时就不服了,这不是看不起我么,分分钟就给整完了~ 我上我也行系列: 唠 ...

  10. c# 怎样能写个sql的解析器

    c# 怎样能写个sql的解析器 本示例主要是讲明sql解析的原理,真实的源代码下查看 sql解析器源代码 详细示例DEMO 请查看demo代码 前言 阅读本文需要有一定正则表达式基础 正则表达式基础教 ...