1.进入网页：https://www.iconfont.cn/，登录后找到自己想要的图标，点击购物车图标添加入库，然后选择下载代码。
2.下载下来的是一个压缩文件里面有很多不同后缀的文件。在我们的项目下新建一个svg的文件夹，将下载的文件除了demo开头的两个文件其他全部拷贝到svg文件夹下。
3.在index.js中引入，下载的css文件：require('../svg/iconfont.css');
4.在iconfont.css中开头将它引用的url加上"./"前缀，为了后面将他引用的文件打包后引用地址正确
5.在index.html中引入图标：
<p>
<span class="iconfont icon-time"></span>//这里的icon-time是我所下载的图标的名称，需要和自己的对应，具体叫什么名字可以在iconfont.css文件中找到
</p>
6.这里打包的文件类型很多，有.ttf/.woff/.eot等。我们使用file-loade来对这些其他文件统一打包，因为他们都不需要进行特殊处理，只要原样输出到打包的文件夹，并保证引用路径正确就可以了。
7.配置webpack-config.js文件：
const{resolve}=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
entry:{
vender:['./src/js/jquery.js','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:resolve(__dirname,'build'),
filename:'[name].js'
},
mode:'development',
module:{
rules:[
//{test:/.css$/,use:['style-loader','css-loader']},
{test:/.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
{test:/.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},
{test:/.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']},
{test:/.(jpg|png)$/,use:[{ loader:'url-loader',options:{
publichPath:'./images',
outputPath:'images/',
limit:1024*16,
name:'[name].[ext]'
}}]},
{test: /.(html)$/, use:['html-loader']},
{exclude:/.(js|json|html|css|less|scss|png|jpg|jpeg|gif)$/,use:[{loader:'file-loader',options:{//配置打包其他文件，exclude表示打包件除了写进去的后缀的其他文件
publichPath:'./svg',//打包后引用文件需要加上的路径前缀
outputPath:'svg/',//打包输出的文件夹
name:'[name].[ext]'//打包后文件的输出名称，这里表示原名称不变
}}]}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['vender','index']
}),
new HtmlWebpackPlugin({
template:'./src/cart.html',
filename:'cart.html',
chunks:['vender','cart']
}),
new MiniCssExtractPlugin({
filename:'index.css'
}),
//new OptimizeCssAssetsPlugin()
]
}