loader

处理CSS

1. 安装npm install --save-dev css-loader

importLoaders 用于配置在@import前有几个loader(css-loader前有几个loader)

2. 安装npm install --save-dev style-loader(将css放到style标签中,直接HMR)

3. 安装npm i -D postcss-loader (通过各种插件处理css,前缀补全,px转rem,转换成未来css)

image.png

4. 安装npm install autoprefixer --save-dev (前缀补全,自动兼容其他浏览器)

新建postcss.config.js

image.png

处理图片

1, 安装 npm install url-loader --save-dev

1. limit

配置图片的最大大小,如果小于,就会生成base64,置于js中,如果大于,就会通过参数fallback的值,来处理图片

2. fallback

默认值为file-loader,当通过fallback ,会继承url中配置的参数,所以,可以直接在url的options中配置file-loader的参数

2, 安装npm install file-loader --save-dev (fallback默认值需要用到)

image.png

处理字体

1, 使用url-loader或者file-loader都可以

image.png

将图标文件下载下来,把对应的文件放到fonts文件夹中,之后,找到对应的css文件,复制下来,黏贴进自己项目的css中,修改对应图标文件的路径

image.png