iconfont举例
- 下载图标代码到本地
- 查看iconfont.css中需要的字体图标后缀名
- 打开下载代码中的demo网址,字体图标名称按该网址中的来,iconfont官网内的项目图标名会和其有差异
- webpack4
//cnpm install -D file-loader
modules:{
rules:[
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
loader:'file-loader',
options:{
name:'[path][name].[ext]',
outputPath:'src/icon' '从build目录下开始的输出路径' 输出路径如果name也写了路径,可能会有冲突
}
}
]
}
- webpack5
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
}
处理xml、tsv、csv文件
//npm install --save-dev csv-loader xml-loader
{
test: /\.(csv|tsv)$/i,
use: ['csv-loader'],
},
{
test: /\.xml$/i,
use: ['xml-loader'],
},
代码示例:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path:path.resolve(__dirname,'build')
},
module: {
rules: [//创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。
{
test: /\.css$/, //匹配文件名
use: [//使用哪些loader
'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader', //将less文件编译成css文件
]
},
{
test: /\.(jpg|png|gif|jfif)$/,
loader:'url-loader', //依赖于file-loader
options: {
//图片小于8kb,会处理成base64,即减少请求数量,增大图片体积(请求速度会变慢cn)
limit: 8 * 1024,
esModule: false, //不采用es6模式解析,否则会和html-loader采用的commonjs模式冲突
name:'[path][name].[ext]'
}
},
{
test: /\.html$/,
loader:'html-loader', //处理html文档中的img,负责引入图片,交给url-loader处理
},
{
// exclude:/\.xx$/
test: /\.(ttf|eot|svg|woff|woff2)$/,
loader:'file-loader',
options:{
name:'[path][name].[ext]'
}
}
]
},
//插件
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html' //将模板复制成指定文件
}), //默认传键html文件,并引入打包输出的资源,默认为基本结构
],
mode:'development'
}