第六节:Webpack打包其他资源

前言:

其他资源可以有两种解读:

1. 其他资源指除了html,"css","js"等资源
2. 也可以是通过exclude排除已经配置完的资源,其他一些没有配置的资源

1. webpack打包其他资源流程

1.1 webpack打包其他资源说明

1. 打包除了html,css,js外的其他资源
2. 利用exclude来排除已经配置处理文件
3. 处理所有不是exclude排除的文件
4. 利用file-loader来处理其他资源文件

这里以图标为例:

1.2 下载字体图标

阿里图标官网: https://www.iconfont.cn/

在阿里图标官网下载你想要的字体图标

1.3 使用字体图标

<span class="iconfont icon-weixin"></span>
<span class="iconfont icon-ziyuan"></span>
<span class="iconfont icon-wodejianying"></span>
<span class="iconfont icon-shouyejianying"></span>
<span class="iconfont icon-sirendingzhi"></span>

1.4 字体图标的打包配置

说明:

1. 在webpack.config.js中配置css文件的打包
2. 在webpack.config.js中配置字体图标的打包

代码如下:

module.exports = {
    // ...
    module:{
        rules:[
            {
                test: /\.css$/,
                use:["style-loader","css-loader"]
            },
            {
                // 打包其他资源
                // exclude 排除, 除了html,css,js文件外所有文件
                // 都是用file-loader来处理, 包括字体图标
                exclude: /\.(html|css|js)$/,
                loader:"file-loader"
            }
        ]
    },
    // ...
}