webpack基本配置---其他资源打包

之前，已经打包了html，css，图片这些。其他的资源例如icon图标怎么打包呢？那么接下来直接上代码~~
下述代码是打包其他资源配置:

const HtmlWebPackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            // 打包其他资源(除了css|js|html|less|sass|json|jpg|png|gif资源以外的资源)
            //这里需要下载安装file-loader
            {
            // 踩坑:如果不加html,html不会被打包.再页面中无法显示.即显示类似于xxxxxxx.html
            // 自己可以尝试下，不加其他配置会有什么效果
                exclude:/\.(css|js|html|less|sass|json|jpg|png|gif)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    plugins:[
        new HtmlWebPackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development'

}

如果想要测试的话，可以在阿里图标库里面下载完之放到自己测试项目里，具体目录如下：

index.html测试内容:

记得将iconfont图标css样式引入到index.js入口文件里：
index.js

import './iconfont.css'

下篇将介绍如何自编译，自动打开浏览器，自动刷新浏览器。也就是webpack的devserver