摘要: 样式规则(Style Rules) 总览 和css一样,样式规则是Sass的基础,原理也差不多:用选择器选择你所要改变样式的元素,然后声明一些属性去决定它的样式。 Sass: css: 1)嵌套(Nesting) 当然Sass致力于让码生幸福,不会让我们一遍又一遍地去写重复的选择器,所以你可以写嵌套 阅读全文
posted @ 2019-08-26 17:03 BeeAndFlower 阅读(290) 评论(0) 推荐(0)
摘要: ***个人Sass笔记系列,参考官方文档翻译,作加深理解和日后查阅使用,若有不当之处欢迎指正~*** 语法(Syntax) 总览(Overview) Sass支持两种语法,可以相互引入使用,所以要用哪种比较随意,取决于你和你的team喜欢怎么来。 1)SCSS SCSS语法使用.scss作为文件扩展 阅读全文
posted @ 2019-07-18 22:18 BeeAndFlower 阅读(456) 评论(0) 推荐(0)
摘要: 盒子模型: 先上谷歌浏览器控制台里的盒子模型图: 应该很明显了,从外而内分别是margin(外边距)、border(边框)、内边距(padding)和内容(heigth&width)。 盒子模型有css标准模型(即上述模型)和IE盒子模型,两者不同之处就在于IE盒子模型的内容区域等于标准模型的内容区 阅读全文
posted @ 2018-11-08 11:15 BeeAndFlower 阅读(149) 评论(0) 推荐(1)
摘要: 生产环境构建 本节我们将深入了解一些应用于构建网站和应用的最佳实践和工具。 配置 开发环境和生产环境的构建目标差异很大。在开发环境中我们需要具有强大的实时重新加载和模块热替换功能的source map和localhost server 。而在生产环境中,我们的目标变成了更小的输出包、更轻量的sour 阅读全文
posted @ 2018-11-05 18:26 BeeAndFlower 阅读(239) 评论(0) 推荐(0)
摘要: Tree Shaking ps:官方文档中本节目录结构继承于起步。 Tree Shaking是一个常用于移除js环境中无用代码的术语,它依赖于ES2015模块系统中的静态结构特性比如import和export。它的名字和概念其实兴起于ES2015打包工具rollup。 webpack发行后就内置支持 阅读全文
posted @ 2018-11-05 17:01 BeeAndFlower 阅读(441) 评论(0) 推荐(0)
摘要: 热模块替换 热模块替换(HMR)是webpack提供的最有用的功能之一,它让各种模块可以在运行时更新而无需刷新,本篇主要注重于实现。 ps:HMR是为开发模式设计的,也只能用于开发模式。 启用HRM 启用HRM只需要更新webpack-dev-server的配置,然后使用webpack的内置插件,同 阅读全文
posted @ 2018-11-02 15:14 BeeAndFlower 阅读(808) 评论(0) 推荐(0)
摘要: 开发: ps:本指南中的工具仅用于开发环境,请不要在生产环境中使用。 先设置一下模式: webpack.config.js 使用source-map: 使用webpack打包资源后,追踪到错误和警告在源代码中的位置有时候会变得比较困难。比如你把a.js、b.js、c.js打包成了bundle.js, 阅读全文
posted @ 2018-11-02 10:47 BeeAndFlower 阅读(234) 评论(0) 推荐(0)
摘要: 输出管理: 目前为止我们都是手动地在index.html中引入所有资源,但是一应用开始渐渐变大,在文件名中使用哈西并输出为多个bundle的时候,项目也会变得难以管理了。因此一些插件就诞生了。 准备: 调整一下项目结构: project src/print.js src/index.js dist/ 阅读全文
posted @ 2018-11-01 18:18 BeeAndFlower 阅读(185) 评论(0) 推荐(0)
摘要: 管理资源: 加载css: 想要在js模块中引入css文件,需要安装style-loader和css-loader: webpack.config.js ps: webpack通过正则表达式来确定用什么loader来处理什么文件; 这个例子中模块运行时<style>标签将被插入到<head>标签中。 阅读全文
posted @ 2018-11-01 10:31 BeeAndFlower 阅读(229) 评论(0) 推荐(0)
摘要: 写在开头:把学习webpack时的笔记贴上来以备不时之需,多摘自官方文档,阅读文档的时候中英文一起看的,中文文档有时比较生涩会加入自己的理解。 安装: 前提: 你要有个node环境(推荐LTS版本)。 本地安装: 如果你安装的是版本v4及之后,还需要安装webpack-cli: 本地安装是官方推荐方 阅读全文
posted @ 2018-10-31 15:52 BeeAndFlower 阅读(241) 评论(0) 推荐(0)