webpack实战——样式文件分离
时间:2022-07-23
本文章向大家介绍webpack实战——样式文件分离,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
这是webpack实战
系列笔记的第7篇记录——分离样式
,前几篇记录如下:
- 打包第一个应用
- 模块化与模块打包
- 资源输入与输出
- 一切皆模块
- 预处理器【上篇】
- 预处理器——常用loader【下篇】
在之前篇章里面主要是对js的打包应用和处理,而打包方面另外一个重要工作就是样式处理
。
在实际工程中,如果项目具有一定规模,那么CSS的维护成本则会比较高昂,这个时候就需要更友好且更低价的方式来处理样式问题。本篇介绍webpack结合样式编辑器、转换器及相关插件来提升样式方面的开发效率。
分离样式
1. 分离样式文件概念
在之前写的简单demo中,处理过关于CSS,并且在预处理器篇介绍过关于CSS的预处理器:style-loader和css-loader。通过JS引入CSS样式去打包,在编写阶段可以直观的描述出来模块之间的依赖关系。
但是问题随之而来:在打包后,我们对css样式的添加,是通过标签<style>
来引入的,可生产环境下,一般我们希望样式存在于CSS文件中而不是style标签中,因为文件更有利于客户端进行缓存
。那么我们怎么输出单独的CSS文件呢?
2. mini-css-extract-plugin
“该插件主要是用于提取样式到CSS文件的。
特性:
- 可处理多样式文件
- 支持按需加载
3 安装
两种方式 选择一种即可
yarn add mini-css-extract-plugin
// 或
npm install mini-css-extract-plugin
4. 举例
举个例子:
a.js
引入自身a.css
样式,并引入b.js
,而b.js
也有自身相应的b.css
样式,那么最终样式会被同步加载,通过index.html
的link标签加载进来。
a.js
import './a.css'
import './b.js'
document.write('A.JS<br/>');
a.css
body{
background: deepskyblue;
}
b.js
import './b.css'
document.write('B.JS<br/>');
b.css
body{
background: thistle;
}
webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: {
index: './src/a.js',
},
output: {
filename: '[name].js'
},
mode: 'development',
// loader配置
module: {
rules: [
// css
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader'
]
}
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
}
打包
yarn build
// 或
npm run build
build
HTML引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./dist/index.css">
<title>style</title>
</head>
<body>
<script src="./dist/index.js"></script>
</body>
</html>
运行结果
运行引入了脚本和样式的HTML文件,查看结果:
结果
小结
其实本篇就是单独拎出来了一个loader预处理器来介绍:mini-css-extract-plugin
。目的就是生产环境下,通过link引入样式存在于CSS文件中而不是style标签中,这样更有利于客户端进行缓存。
下一篇介绍样式预处理。
- org.hibernate.type.StringType cannot be cast to org.hibernate.type.VersionType
- JBPM4.4(2)-state结点和decision结点
- [Go 语言社区] Golang架构底层---日志函数
- [Go 语言社区]服务器游戏用户登陆数据读取函数
- 设计Go API的管道使用原则
- Goroutine背后的系统知识
- 从零到 Go:Google感恩节火鸡涂鸦开发纪实
- JBPM4.4(1)-简单工程的搭建
- 未绑定元素“mx:Panel”的前缀“mx”
- [Go 语言社区] Golang架构底层函数图片保存-原创
- [Go 语言社区]Golang架构--服务器与客户端自定义传输规则--原创
- Go语言 -浮点数
- android开发列表界面
- Java中Queue和BlockingQueue的区别
- 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 数组属性和方法
- 100% 展示 MySQL 语句执行的神器-Optimizer Trace
- 数据处理|R-dplyr
- ggplot2|从0开始绘制折线图
- Django Swagger接口文档生成
- ggplot2|从0开始绘制箱线图
- ggplot2|从0开始绘制直方图
- ggplot2|从0开始绘制PCA图
- Python字典
- 如何用R语言绘制生成正态分布图表
- ggplot2-plotly|让你的火山图“活”过来
- 小数据| 描述性统计(Python/R 实现)
- ggplot2|发散性“正负”图
- R语言蒙特卡洛计算和快速傅立叶变换计算矩生成函数
- pheatmap|暴雨暂歇,“热图”来袭!!!
- 统一服务消息接口报48001错误