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