发表于 | 分类于

笔记具体内容见有道云:http://note.youdao.com/noteshare?id=395cbdfc65548e253afd8783e98434d3

总结

1.如果父元素的line-height有单位（px、%）,那么继承的值则是换算后的一个具体的px级别的值
2.而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。
3.line-height的大小与元素的height大小毫无关系。只与font-size有关

发表于 | 分类于

项目地址：https://github.com/xieshuangting/webpack-test
笔记具体内容见有道云：http://note.youdao.com/noteshare?id=76f51803cf398ef5b6d627d2b3813222

webpack的作用：

1.（babel-loader）转化语法，将es6以上的语法转化成es5.例如es module。
2.利用loader补全css样式厂商前缀（autoprefixer）。
3.（css-loader，style-loader）压缩合并css，js。
4.（url-loader）将图片转化成base64

webpack默认配置文件是webpack.config.js

loader：

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
例如：url-loader将图片转换成一个base64位的字符串

plugins：

使用 plugins 让打包更便捷
例如：html-webpack-plugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

Source-map

一个映射关系，他知道dist目录下js文件中的错误代码对应的是src目录下相应文件的错误代码的位置

Hot Module Replacement

热模块更新。运行代码打开浏览器，改变代码更新页面

tree-shaking

虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。

Develoment 和 Production 模式的区分

打包dev：webpack-dev-server，pro：webpack

Code Splitting代码分割：

手动：将引进的工具库分开打包（将工具库挂载到window方法下。然后entry分开打包）
自动：同步，配置splitChunks
异步，不需配置，直接打包

Lazy Loading 懒加载：

异步加载工具库来实现懒加载
在控制台中按下Ctrl+shift+p可以调出输入面板。输入coverage调出面板，点击圆圈之后可以看到main.js一开始加载的时候的利用率。

异步加载时设置 webpackPrefetch:true 分开打包并且用到时才加载

CSS 文件的代码分割：

若是不做css代码的分割的话webpack会将css代码放在main.js文件里面。extract-text-webpack-plugin。optimize-css-assets-webpack-plugin进行css代码的压缩和合并