Webpack 添加iconfont添加矢量图标库 配置热加载 给页面添加图标 开发模式和生产模式的区别

打开 iconfont官网！ 把自己需要的图标加入到购物车 后添加至项目  进入项目后下载到本地

 将下载文件复制黏贴到项目中

在src中添加fonts 将三个文件添加到fonts 中

 

 iconfont.css添加到

 添加到文件中css文件中

 可能会出现报错需要修改一下 icongont.css里面的url路径要指向fonts里面的iconfont文件

配置热加载 

1.安装命令：

npm i webpack-dev-server -D

 2.配置热加载

 3.运行命令

npx webpack serve

开发模式和生产模式

npm run serve/dev跑起来的是开发模式，因为是运行的本地服务模拟启动的；
npm run build生成的是打包好的文件，用来部署到服务器上运行，所以是生产模式；

给页面添加图标

直接在网页上添加一个名字为  favicon 格式为ico 的小图片就可以了