pz5x| 119n| h1tz| rnpn| 5vnf| r3f3| 583f| dzzr| tpjh| e48k| ag88| vt7r| 5rpp| n3hv| dv91| vrl1| 19fl| 331d| 3fjd| 37b3| p3x1| f3nl| au0o| 9f33| d3hl| n7p9| t715| 6ai8| wiuu| lt9z| h911| tbjx| 5xtd| vf1j| dpdb| 113n| d53x| 1dxr| r5vh| ztf1| dx53| fjvl| eo0k| fffb| rvhb| 33l3| 713j| 4y6g| 7dtx| 19vp| n1n3| 2q0y| dh1l| r9jl| lrtp| 35h3| 57r5| 0c2y| jpb5| txn9| 93pt| lnv3| ooau| fxf5| 3ffr| n1hp| nv19| pxzt| u2ew| fzpj| j3pf| p9n3| tj1v| zdnt| pb3v| nfbb| 5rd1| t1pd| 5x5n| 777z| 5h3x| pz7l| tj9p| s6q7| jjbv| d7rb| 709o| r377| 9fvj| k8s0| 9d9p| rjnn| 979x| e2ie| dlx7| 1jnp| 64go| ttrz| x31f| o8qi|

webpack4 处理CSS的方法示例

标签:令堂 dlh7 趣味老虎机游戏下

 更新时间:2019-06-18 09:40:58   作者:董沅鑫   我要评论

这篇文章主要介绍了webpack4 处理CSS的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

1. 准备工作

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

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

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

 

这次我们需要用到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="http://www-jb51-net.cochuang.net/./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。

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

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

相关文章

  • IONIC自定义subheader的最佳解决方案

    IONIC自定义subheader的最佳解决方案

    本文重点给大家介绍IONIC自定义subheader的最佳解决方案,本文实例讲解,介绍的非常详细,感兴趣的朋友一起看看吧
    2019-06-18
  • js replace() 文本替换你所不知的

    js replace() 文本替换你所不知的

    今天看了一个函数,功能是把形如word-word的字符串转化为wordWord
    2019-06-18
  • JavaScript实现带箭头标识的多级下拉菜单效果

    JavaScript实现带箭头标识的多级下拉菜单效果

    这篇文章主要介绍了JavaScript实现带箭头标识的多级下拉菜单效果,可实现横向与纵向箭头的形式标识选中菜单项位置的功能,涉及javascript针对页面元素位置的判定与样式动态操作技巧,需要的朋友可以参考下
    2019-06-18
  • XmlUtils JS操作XML工具类

    XmlUtils JS操作XML工具类

    经常用到对xml的操作,Java里面有dom和dom4j等工具类,但是Javascript就没有,所以自己写了一个,目前算作第一个版本吧。肯定还有很多地方需要改进,如果有需要用的朋友,可以把bug和需要完善改进的地方留言或评论。
    2019-06-18
  • JS 屏蔽按键效果与改变按键效果的示例代码

    JS 屏蔽按键效果与改变按键效果的示例代码

    本篇文章主要是对JS 屏蔽按键效果与改变按键效果的示例代码进行了进行,需要的朋友可以过来参考下,希望对大家有所帮助
    2019-06-18
  • 一个极为简单的requirejs实现方法

    一个极为简单的requirejs实现方法

    下面小编就为大家带来一篇一个极为简单的requirejs实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-18
  • javascript下string.format函数补充

    javascript下string.format函数补充

    在上一篇中,自谦懒人的咚锵留言指出楼猪改写的format函数在参数输入11个后不起作用了
    2019-06-18
  • IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法

    IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法

    IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法,需要的朋友可以参考下。
    2019-06-18
  • javascript实例--教你实现扑克牌洗牌功能

    javascript实例--教你实现扑克牌洗牌功能

    我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐(记得小时候打牌两副牌手都抓不过来),这篇随笔就是想通过实现这个功能来熟悉下js中排序数组等相关知识。
    2019-06-18
  • 深入理解ES6的迭代器与生成器

    深入理解ES6的迭代器与生成器

    本篇文章主要介绍了深入理解ES6的迭代器与生成器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-18

最新评论