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 相关文章推荐
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 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
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
JavaScript回调函数callback用法解析
2020/01/14 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
如何更优雅地写python代码
2019/07/02 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
python3中布局背景颜色代码分析
2020/12/01 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
报到证丢失证明
2014/01/11 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
教育见习报告范文
2014/11/03 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书