webpack4 系列教程(五): 处理CSS

本文是webpack4系列教程的第五部分,主要讲解如何处理CSS。内容包括通过link标签和style标签引入CSS,动态卸载和加载CSS,以及在页面加载前对CSS的处理。使用了MiniCssExtractPlugin和style-loader等工具,通过实例演示了各种操作。
摘要由CSDN通过智能技术生成

这节课讲解webpack4中打包css的应用。v4 版本和 v3 版本并没有特别的出入。

>>> 本节课源码

>>> 所有课程源码

专注前端与算法的系列干货分享,欢迎关注(¬‿¬):
「微信公众号:心谭博客」| xin-tan.com | GitHub

1. 准备工作

众所周知,CSS 在 HTML 中的常用引入方法有<link>标签和<style>标签两种,所以这次就是结合webpack特点实现以下功能:

  1. 将 css 通过 link 标签引入
  2. 将 css 放在 style 标签里
  3. 动态卸载和加载 css
  4. 页面加载 css 前的transform

下图展示了这次的目录代码结构:
目录结构

这次我们需要用到css-loaderfile-loader等 LOADER,package.json如下:

{
   
  "devDependencies": {
   
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "style-loader": "^0.21.0"
  }
}

其中,base.css代码如下:

*,
body {
   
  margin: 0;
  padding: 0;
}
html {
   
  background: red;
}

index.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值