webpack打包其他资源
前言:
其他资源可以有两种解读:
- 其他资源指除了
html,"css","js"等资源 - 也可以是通过
exclude排除已经配置完的资源,其他一些没有配置的资源
1. webpack打包其他资源流程
1.1 webpack打包其他资源说明
- 打包除了
html,css,js外的其他资源 - 利用
exclude来排除不需要处理的文件 - 利用
file-loader来处理匹配成功后的资源
这里以图标为例:
1.2 下载字体图标
阿里图标官网: https://www.iconfont.cn/
在阿里图标官网下载你想要的字体图标
1.3 配置字体图标的打包
说明:
- 在webpack.config.js中配置css文件的打包
- 在webpack.config.js中配置字体图标的打包
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")
module.exports = {
entry: "./src/main.js",
output: {
filename:"bundle.js",
path:resolve(__dirname,'dist')
},
module:{
rules:[
{
test: /\.css$/,
use:["style-loader","css-loader"]
},
{
// 打包其他资源
// exclude 排除, 除了html,css,js文件外所有文件
// 都是用file-loader来处理, 包括字体图标
exclude: /\.(html|css|js)$/,
loader:"file-loader"
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:"./src/index.html"
})
],
mode:"development"
}
这样图标文件就会被打包到bundle.js中, 因此在html文件中直接使用字体图标就可以了
