zoukankan      html  css  js  c++  java
  • webpack4 处理CSS

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

    教程所示图片使用的是 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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><scriptsrc="./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

    对于csstransform,简单来说:在加载 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); // 查看cssreturnwindow.innerWidth < 1000 ? css.replace("red", "green") : css; // 如果屏幕宽度 < 1000, 替换背景颜色
    };
    

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

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

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

    目录结构

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

  • 相关阅读:
    kkfileview v2.0 发布,文件在线预览项目方案
    margin:0 auto 与 text-align:center 的区别
    div页面居中(上下左右)
    jquery 实现页面拖拽并保存到cookie
    移动开发框架,第【一】弹:QuoJs 官方文档(汉化版)
    javascript 匿名函数的理解,js括号中括function 如(function(){})
    百度,淘宝,腾讯三大巨头HTML页面规范分解
    Javascript触屏手势库-JTouch(更新V1.1)
    移动设备、手机浏览器Javascript滑动事件代码
    jQuery 实现上下,左右滑动
  • 原文地址:https://www.cnblogs.com/ysk123/p/9987785.html
Copyright © 2011-2022 走看看