webpack4 处理CSS的方法示例


Posted in Javascript onSeptember 03, 2018

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

1. 准备工作

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

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

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

 webpack4 处理CSS的方法示例

这次我们需要用到css-loader,file-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</title>
</head>
<body>
 <script src="./dist/app.bundle.js"></script>
</body>
</html>

2. CSS通过<link>标签引入

link 标签通过引用 css 文件,所以需要借助file-loader来将 css 处理为文件。

webpack.config.js:

const path = require("path");

module.exports = {
 entry: {
  app: "./src/app.js"
 },
 output: {
  publicPath: __dirname + "/dist/",
  path: path.resolve(__dirname, "dist"),
  filename: "[name].bundle.js"
 },
 module: {
  rules: [
   {
    test: /\.css$/, // 针对CSS结尾的文件设置LOADER
    use: [
     {
      loader: "style-loader/url"
     },
     {
      loader: "file-loader"
     }
    ]
   }
  ]
 }
};

为了让效果更显著,编写如下app.js:

let clicked = false;
window.addEventListener("click", function() {
 // 需要手动点击页面才会引入样式!!!
 if (!clicked) {
  import("./css/base.css");
 }
});

3. CSS放在<style>标签里

通常来说,css放在style标签里可以减少网络请求次数,提高响应时间。需要注意的是,在老式 IE 浏览器中,对style标签的数量是有要求的。

app.js和第二部分一样,webpack.config.js配置修改如下:

const path = require("path");

module.exports = {
 entry: {
  app: "./src/app.js"
 },
 output: {
  publicPath: __dirname + "/dist/",
  path: path.resolve(__dirname, "dist"),
  filename: "[name].bundle.js"
 },
 module: {
  rules: [
   {
    test: /\.css$/, // 针对CSS结尾的文件设置LOADER
    use: [
     {
      loader: "style-loader",
      options: {
       singleton: true // 处理为单个style标签
      }
     },
     {
      loader: "css-loader",
      options: {
       minimize: true // css代码压缩
      }
     }
    ]
   }
  ]
 }
};

4. 动态卸载和加载CSS

style-loader为 css 对象提供了use()和unuse()两种方法,借助这两种方法,可以方便快捷地加载和卸载 css 样式。

首先,需要配置webpack.config.js:

const path = require("path");

module.exports = {
 entry: {
  app: "./src/app.js"
 },
 output: {
  publicPath: __dirname + "/dist/",
  path: path.resolve(__dirname, "dist"),
  filename: "[name].bundle.js"
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     {
      loader: "style-loader/useable" // 注意此处的style-loader后面的 useable
     },
     {
      loader: "css-loader"
     }
    ]
   }
  ]
 }
};

然后,我们修改我们的app.js,来实现每 0.5s 换一次背景颜色:

import base from "./css/base.css"; // import cssObj from '...'
var flag = false;
setInterval(function() {
 // unuse和use 是 cssObj上的方法
 if (flag) {
  base.unuse();
 } else {
  base.use();
 }
 flag = !flag;
}, 500);

打包后打开index.html即可看到页面背景颜色闪动的效果。

5. 页面加载css前的transform

对于css的transform,简单来说:在加载 css 样式前,可以更改 css。这样,方便开发者根据业务需要,对 css 进行相关处理。

需要对style-loader增加options.transform属性,值为指定的 js 文件,所以, webpack.config.js配置如下:

const path = require("path");

module.exports = {
 entry: {
  app: "./src/app.js"
 },
 output: {
  publicPath: __dirname + "/dist/",
  path: path.resolve(__dirname, "dist"),
  filename: "[name].bundle.js"
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     {
      loader: "style-loader",
      options: {
       transform: "./css.transform.js" // transform 文件
      }
     },
     {
      loader: "css-loader"
     }
    ]
   }
  ]
 }
};

下面,我们编写css.transform.js,这个文件导出一个函数,传入的参数就是 css 字符串本身。

module.exports = function(css) {
 console.log(css); // 查看css
 return window.innerWidth < 1000 ? css.replace("red", "green") : css; // 如果屏幕宽度 < 1000, 替换背景颜色
};

在app.js中引入 css 文件即可:

import base from "./css/base.css";

我们打开控制台,如下图所示,当屏幕宽度小于 1000 时候,css 中的red已经被替换为了green。

webpack4 处理CSS的方法示例

需要注意的是:transform是在 css 引入前根据需要修改,所以之后是不会改变的。所以上方代码不是响应式,当把屏幕宽度拉长到大于 1000 时候,依旧是绿色。重新刷新页面,才会是红色。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 跨域访问解决方案
Feb 14 Javascript
javascript 打印页面代码
Mar 24 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
vue v-model表单控件绑定详解
May 17 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 #Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 #Javascript
webpack4 处理SCSS的方法示例
Sep 03 #Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 #Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 #Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 #Javascript
详解jQuery中的easyui
Sep 02 #jQuery
You might like
编译问题
2006/10/09 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
php 浮点数比较方法详解
2017/05/05 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
Git命令之分支详解
2021/03/02 PHP
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
Python yield 使用方法浅析
2017/05/20 Python
python实现画一颗树和一片森林
2018/06/25 Python
python遍历小写英文字母的方法
2019/01/02 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
公司董事长职责
2013/12/12 职场文书
入党自我评价优缺点
2014/01/25 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
年底个人总结范文
2015/03/10 职场文书
班级管理经验交流材料
2015/11/02 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python