前言:
其他资源可以有两种解读:
- 其他资源指除了
html,"css","js"等资源 - 也可以是通过
exclude排除已经配置完的资源,其他一些没有配置的资源
1. webpack打包其他资源流程
1.1 webpack打包其他资源说明
- 打包除了
html,css,js外的其他资源 - 利用
exclude来排除已经配置处理文件 - 处理所有不是
exclude排除的文件 - 利用
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 字体图标的打包配置
说明:
- 在webpack.config.js中配置css文件的打包
- 在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"
}
]
},
// ...
}
