11.23

url-loader 默认会将图片转化为 base64 编码格式, 目的:提高性能：

base64 编码格式的图片说明 :

• 精灵图 : 将一些小图片合并为一张图片,减少请求次数,提高性能
• 字体图标 :直接将一些小的图片,合并到字体文件中,并且不会失真
• base64 : 是一种编码格式,能够将图片、文字等常见的文件,转化为 base64 格式,这种字符串格式, 浏览器能够识别并且读取显示到页面中;
• base64 是一个字符串,也可以直接被内嵌到页面中, 或者 css 中
• 注意 : 大图片不适合用 base64 处理, 只有小的图标才适合 base64 处理

file-loader 在车里图片时, 会对文件进行重命名 :

原始： background-image: url(../images/1.jpg);

处理后： background-image: url(9c9690b56876ea9b4d092c0baef31bb3.jpg);

 

background-sizing:的几个值：

• cover：宽度和高度都要铺满整个盒子
• contain：以其中一边到盒子的边为准，另一边跟着这一边等比例拉大，一边到了，另一边就停下了

 

处理 ES6 语法: babel

•  babel 是一个 JavaScript 编译器
• webpack 只能处理 import / export 这个 es6 模块化语法，而其他的 js 新语法,应该使用 babel 来处理
• 安装 : npm i -D babel-preset-env babel-preset-stage-2

1. babel-preset-* 表示能够解析什么版本的 js 语法
2. babel-preset-env : 表示能够解析 es2015,es2016,es2017,es2018 这些标准的语法
3. babel-preset-stage-2 : 用来解析经过会遇到,但是还没有被采纳为标准的语法
4. babel-polyfill与babel-plugin-transform-runtime 也是做兼容处理的,以前都是用这个,兼容更早的