目录 Webpack 的工作原理 loader 和 plugin 的区别 webpack 如何处理 css 文件 三种样式 sass/scss 和 less 的区别 另一种定义全局 less 变量的方法...webpack 的工作原理是，从配置文件定义的模块列表开始，依赖文件类型选择使用不同的 loader分别进行处理，最后将所有模块打包为bundle，这个 bundle 可由浏览器加载。...loader 和 plugin 的区别 loader 用于对模块源码的转换，loader 描述了 webpack 如何处理非 js 模块，并且在 build 过程中引入这些依赖。...如果是 webpack 工程，打开webpack.config.js文件，在里面新增一个配置节点module，在module对象中，有一个rules属性，它是一个数组，里面存放了所有第三方文件匹配和处理规则...与原来的语法兼容，只是用{}取代了原来的缩进。 less Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数.
Sass 和 Less 这类语言，其实可以理解成 CSS 的超集，也就是它们是基于 CSS 原本的语法格式基础上，增加了编程语言的特性，如变量的使用、逻辑语句的支持、函数等。...--link标签需要设置 rel=stylesheet/less, less.js的加载需要放在所有 link 标签后面--> 标签加载 less.js 的代码需要放在最后，即所有用 link 标签引入 less 文件的后面，因为 less.js 文件加载成功后就会去将 less 转成 css 标准样式，在 ...但 npm 安装的 sass 跟在 Ruby 下安装的 sass 是否有和区别，我不清楚，用段时间，如果有啥问题再来说说。...实际上，条件语句主要适用于库和框架。 其他区别，等用段时间，熟悉了再来讲讲。
---- 相关知识点 布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法...... 题目&答案 如何理解CSS的盒子模型？...每个HTML元素都是长方形盒子。 （1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。...link和@import的区别？ （1）link属于XHTML标签，而@import是CSS提供的。 （2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。...区别： (1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有...解决方案：用“ picRotate start ”方法写注释。
这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。...{ width: 300px; } 用 Less 语言我们可以这样书写代码： #header { color: black; .navigation { font-size: 12px...; } .logo { width: 300px; } } 用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。...你可以用 Less 更直观地实现这一需求。...; } 参见：懒加载 13.
项目搭建 项目是按 antd 推荐的教程来搭建的：antd 在 create-react-app 中使用 , 实现了 按需加载组件代码和样式。 5....主要项目结构 - components - article 文章详情 - articles 文章列表 - comments 评论 - loadEnd 加载完成 - loading 加载中...主页的满屏 飘花洒落 的效果 主页的 飘花洒落 的效果 大家也看到了，主页的满屏动态 飘花洒落 的效果很棒吧，这效果我也是网上找的，是在单独的一个 main.html 文件上的，代码链接如下： 主页的满屏...和 webpack.config.prod.js 的配置，打包后可能看不到想要的效果，因为 react-app-rewired 打包时，是根据根目录的 config-overrides.js 来进行打包...，所以要修改 webpack 的配置的话，请修改 config-overrides.js 。
ant-design-vue 2.安装ant-design-vue yarn add ant-design-vue 然后在main.js中添加所需的antd组件 注意：ant-design-vue支持完整引入和按需加载...提取antd的less变量文件 我们的思路就是提取ant-design-vue中所有的less代码汇总到一个文件中，然后在index.html页面中直接引用，最后使用less.js中的modifyVars...【重点】安装antd-theme-webpack-plugin 1.首先安装提取less文件的插件antd-theme-webpack-plugin yarn add antd-theme-webpack-plugin...2、修改vue.config.js，配置并使用插件 注：可以参考一下两个网址 1.https://github.com/mzohaibqc/antd-theme-webpack-plugin 2.
)器来加载成其可识别的JS模块资源,通过配置一些信息，就能将资源进行打包构建，更好地实现前端的工程化 Webpack安装 本地安装: npm install -D webpack -D 实际上是简写...，模块,在Webpack里,一切皆模块,Webpack会从配置的entry开始递归找出所有依赖的模块,最常用的是rules配置项,功能是匹配对应的后缀,从而针对代码文件完成格式转换和压缩合并等指定的操作...的基本使用方式 : 配置package.json的start命令为webpack 创建webpack.config.js 指定项目打包的入口 指定项目打包后文件的名称和输出路径 配置代码错误源 如果报错了...g|gif|svg)$/, use: ['file-loader'] } ] webpack加载字体 下载字体 定义字体 @font-face { font-family: 'wanlum.../fonts/Raleway.ttf"); } 使用字体 div { font-family: 'wanlum'; color: red; font-size: 30px; } 配置webpack.config.js
此时我想起了中学时代的反比例函数（无限接近于x轴）， 本文用的是 100/step（随着step增大而减小）. /** * 根据关卡等级返回相应的一般颜色和特殊颜色 * @param {number...其次，确定每个关卡的列数 col，即可得知小盒子的总个数 col * col, 将每个盒子的 HTML 片段字符串存入长度为 col * col 的数组 arr 中，再随机修改其中一个的颜色赋值为特殊颜色...= Math.floor(col * col * Math.random()); // 解构赋值获取一般颜色和特殊颜色， es6 解构 let [normalColor, specialColor...--UMD, 这里有篇文章讲述到 js 的模块化，里面有涉及 UMD, 有需要的同学可以看看——Javascript 模块化 下面具体讲述如何使用 webpack 实现上述需求： // webpack.js.../webpack.js index.html 引入生成的 colorGame.js 即可。 Demo . 项目源码
生成多套CSS皮肤 利用CSS预处理语言（如：Less，stylus 或 sass）以及 Webpack、gulp等工具输出多套主题样式。...CSS变量换肤 利用CSS变量设置颜色， 用js动态修改CSS变量，进而换色。如果不考虑兼容性，这是最佳换肤方案。...: 18px; --font-size-large-x: 22px; --font-size-medium: 14px; --font-size-medium-x: 16px; --font-size-small-s...在引入less文件的时候需要通过link方式引入，然后基于less.js中的方法来进行修改less变量: less.modifyVars({ '@themeColor': 'blue'}); link...方案一 针对方案一，我们只需要抽取相关的变量色值到独立的文件中，约定项目在使用色值的地方统一引用该文件的变量。当需要修改主题色的时候修改对应变量即可。
// LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a...文件, 在head中引入: 注意你的less样式文件一定要在引入less.js前先引入...要输出这样的值我们可以在字符串前加上一个 ~ 例： .class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; } 我们可以将要避免编译的值用...文件, 在head中引入: 注意你的less样式文件一定要在引入less.js前先引入...要输出这样的值我们可以在字符串前加上一个 ~ 例： .class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; } 我们可以将要避免编译的值用
Entry entry是配置模块的入口，可抽象成输入，Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。...webpack 5也有一些内置的资产加载器。 在我们的项目中，有一个HTML文件，该文件可以加载并引入一些 JS ，但实际上并没有执行任何操作。 那么这个webpack配置要做的主要事情是什么？...这需要引入一些加载器和依赖项。...(53 105 40); html { font-size: $font-size; color: $font-color; } 现在，将文件导入index.js并添加四个 loader 。...总结 我用 Babel，Sass，PostCSS，生产优化和开发服务器创建了可用于生产的webpack 5样板，其中包含本文的所有内容，但会涉及更多细节。
使用新值调用时，将重新编译较少的文件，而无需重新加载。... less.modifyVars({ '@text-color': '#fff', '@bg-color': '#000...这边选择 CSS 和 postcss 这样就可以将 css 解析成 CSS AST (抽象语法树)了。...目的 当前我有一份 less 样式和 2 份颜色变量，我需要生成如下样式: image.png 这样我就可以在 html 跟节点 添加和删除 dark 这个样式来实现换肤了。...当前假设我们的 webapp 是基于 webpack 构建的。 module: { rules: [ //...
使用新值调用时，将重新编译较少的文件，而无需重新加载。... less.modifyVars({ '@text-color': '#fff', '@bg-color': '#000'...这边选择 CSS 和 postcss 这样就可以将 css 解析成 CSS AST (抽象语法树)了。...目的 当前我有一份 less 样式和 2 份颜色变量，我需要生成如下样式: 这样我就可以在 html 跟节点 添加和删除 dark 这个样式来实现换肤了。...当前假设我们的 webapp 是基于 webpack 构建的。 module: { rules:[ //...
display:-webkit-box; // 作为弹性伸缩盒子模型显示。...当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。浏览器是如何对 HTML5 的离线储存资源进行管理和加载？...如何用 Webpack 实现对 CSS 的处理：Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader注意，答出“用什么”有时候可能还不够...解决；解释性语言和编译型语言的区别（1）解释型语言使用专门的解释器对源程序逐行解释成特定平台的机器码并立即执行。...是代码在执行时才被解释器一行行动态翻译和执行，而不是在执行之前就完成翻译。解释型语言不需要事先编译，其直接将源代码解释成机器码并立即执行，所以只要某一平台提供了相应的解释器即可运行该程序。
use属性通过一个数组，表示匹配到的文件使用哪些需要加载的loader，这里就是style-loader和css-loader。...感觉非常酷~ 然后执行打包命令，看看有什么变化~ npm run build 此时用浏览器打开index.html，会发现之前的Hello webpack变成了红色。...用浏览器检查一下页面，就会知道webpack是怎么做到的了。 说明webpack将css代码自动添加到head标签中了，非常的智能化~ 加载图片 接下来尝试下加载图片和在css中引用背景图片。...说明webpack处理了添加的图片，并重新命名了。 关于更多的图片压缩和优化，以后再继续整理。 加载字体 加载字体与加载图片和css没有什么区别。我找了一个ttf格式的字体来学习这个过程。...加载数据 webpack可以加载任何类型的数据，例如JSON, CSV, TSV, 和XML。webpack默认内置了JSON加载数据。 照着官网的例子一步步来。
CSS 并不是面试重点考察的领域，但如果能在 CSS 领域有自己的见解和经验，会使自己更加脱颖而出。 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？...当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。 chrome中，使用collapse值和使用hidden没有区别。...CSS预处理器的原理: 是将类 CSS 语言通过 Webpack 编译 转成浏览器可读的真正 CSS。...p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例 36 让页面里的字体变清晰，变细用CSS怎么做？...缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。 43 style标签写在body后与body前有什么区别？ 页面加载自上而下 当然是先加载样式。
，指的是用 var声明变量 或用 function 函数名（）{ } 声明的，会在 js预解析 阶段提升到顶端；（es6的let 和 const 不会提升）其次，函数提升优先级 高于 变量提升 webpack...Webpack的“一切皆模块”以及“按需加载”两大特性使得它更好地服务于工程化。...中文文档-webpackjs.com 当我们谈论前端工程化时，我们谈论什么 webpack打包原理 推荐阅读： [译] 愿未来没有 Webpack webpack 配置多页面应用 简答： 用webpack...主要把entry和plugins中的html-webpack-plugin进行改造即可。 2.多页面多配置。多页面单配置的优点在于，不同页面可以共享相同代码，容易实现长缓存。...中增加一块高度占位的盒子 节流防抖 推荐阅读： 7分钟理解JS的节流、防抖及使用场景 算法 手写二分法 要求手写！
：ts加载器，用于在webpack中编译ts文件 html-webpack-plugin：webpack中html插件，用来自动创建html文件 clean-webpack-plugin：webpack...块级盒子 一个被定义成块级的（block）盒子会表现出以下行为: 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽 每个盒子都会换行 width...和 height 属性可以发挥作用 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开” 内联盒子 一个被定义成内联的（inline box）...Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。 Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。...padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
现在已知的有两种盒模型，W3C盒模型(标准盒子)和IE盒子模型(怪异盒子)。 W3C盒模型(标准盒子)和IE盒子模型(怪异盒子)分别是什么？...IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。...浏览器渲染机制 网页生成过程： 1．HTML被HTML解析器解析成DOM 树 2．css则被css解析器解析成CSSOM 树 3．结合DOM树和CSSOM树，生成一棵渲染树(Render Tree) 4...：目录清除 mini-css-extract-plugin：分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin) loader和plugin...例如: contan:layout告诉浏览器这个节点内部的子元素和外面的使用font-display进行优化:让文字更早的显示在页面上，减轻文字闪动的问题 html 相关优化 减少iframes使用 压缩空白符
领取专属 10元无门槛券
手把手带您无忧上云
