摘要:版本和版本并没有特别的出入。需要注意的是,在老式浏览器中,对标签的数量是有要求的。这样,方便开发者根据业务需要,对进行相关处理。需要注意的是是在引入前根据需要修改,所以之后是不会改变的。重新刷新页面,才会是红色。
这节课讲解webpack4中打包css的应用。v4 版本和 v3 版本并没有特别的出入。
>>> 本节课源码
>>> 所有课程源码
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> 原文地址。 评论或者最新更新,也请移步。
1. 准备工作众所周知,CSS 在 HTML 中的常用引入方法有标签和标签两种,所以这次就是结合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代码如下:
2. CSS通过标签引入Document
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放在标签里
通常来说,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 时候,依旧是绿色。重新刷新页面,才会是红色。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97126.html
摘要:首先安装在中引入并添加修改和的之后,可见中引入了一个文件也正是我们在和中的代码可以帮助我们处理,如自动添加浏览器前缀。在根目录下创建修改和的在中加入打包之后打开,可见浏览器前缀已经加上了 1. 在项目中使用 less 在 src/assets/ 下新建 common.less : body{ background: #fafafa; padding: 20px; } show...
摘要:全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程,一共分成节,每节都有讲解,并且准备了配套代码。奈何深感水平不够,只有一腔热情,所以直接开放了教程和源码。 webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com。每周 1 篇原创技术分享!开源教程(webpack、设计模式)、面试刷题(偏前...
摘要:按照我们的仿真的环境,最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法,请查看系列教程六处理系列教程五处理所以,我们的文件如下安装完相关插件后,我们需要在的配置中引用第三部分定义的代码。 教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步 原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示):s...
摘要:按照我们的仿真的环境,最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法,请查看系列教程六处理系列教程五处理所以,我们的文件如下安装完相关插件后,我们需要在的配置中引用第三部分定义的代码。 教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步 原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示):s...
摘要:传送门系列教程一初识系列教程二创建项目,打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境 在前端开发日益复杂的今天,我们需要一个工具来帮助我们管理项目资源,打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音,我的博文只...
阅读 3529·2023-04-26 00:05
阅读 934·2021-11-11 16:55
阅读 3491·2021-09-26 09:46
阅读 3491·2019-08-30 15:56
阅读 890·2019-08-30 15:55
阅读 2913·2019-08-30 15:53
阅读 1915·2019-08-29 17:11
阅读 784·2019-08-29 16:52