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()
]
}