webpack-qc-iconfont-plugin是一个w
webpack-qc-iconfont-plugin是一个webpack插件,可以轻松地帮你将阿里icon的图标项目下载至本地
Install$ npm install webpack-qc-iconfont-plugin
该插件提供 gulp 插件版
gulp-qc-iconfont
Usage
webpack.config.js 文件:
const Path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
// 引入插件
const WebpackQcIconfontPlugin = require('iconfont-webpack-plugin')
module.exports = {
mode: 'development',
entry: './test/index.js',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
// 插件调用代码
new WebpackQcIconfontPlugin({
url: '//at.alicdn.com/t/font_xxxxxxx_xxxxxx.css',
isDev: true,
fontPath: './iconfont/iconfont',
iconPrefix: '.cu-icon-',
keepIconFontStyle: false,
fontExt: ['.eot', '.ttf', '.svg', '.woff', '.woff2'],
template: 'index.html'
}),
],
output: {
filename: '[name].bundle.js',
path: Path.resolve(__dirname, 'dist')
}
};
Options
url
new WebpackQcIconfontPlugin({url: '//at.alicdn.com/t/font_xxxxxxx_xxxxxx.css' })
isDev
true
描述:当前是否为开发模式
fontPath
'./iconfont/iconfont'
描述:下载的字体图标文件保存路径,只有在 isDev
为false,也就是生产环境才有效
iconPrefix
.icon-
描述:字体图标统一前缀,如设置为 { iconPrefix: '.cu-icon-' }
,则图标调用为:<i class="iconfont cu-icon-XXX"></i>
keepIconFontStyle
.iconfont{/*...*/}
中的样式,该属性多用于与vant等类似已有自己字体图标相关初始设置的组件库配合使用,如您没有与类似组件使用,建议开启或自定义一个,否则您的图标将不会有初始样式
fontExt
isDev
为false时有效
template
index.html
描述:生成的图标css将自动注入模板文件,图标生成后会根据该配置自动注入到模板文件中,无需手动调用,如不需要自动注入,可以将该值设置为 null
补充:开发模式下会css会以 <style> ... </style>
形式注入,生成模式下会以 <link rel="stylesheet" href="./iconfont.css">
方式注入
开发模式(基础用法):
将自动获取css源文件注入到定义的模板中。
webpack.config.jsconst WebpackQcIconfontPlugin = require('iconfont-webpack-plugin')
module.exports = {
plugins: [
new WebpackQcIconfontPlugin({ url: '//at.alicdn.com/t/font_xxxxxxx_xxxxxx.css' })
]
}
Output:
将在 index.html
文件夹下以 <style> ... </style>
形式注入css,注入css结构如下:
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_xxxxxxx_xxxxxx.eot?t=xxx');
src: url('//at.alicdn.com/t/font_xxxxxxx_xxxxxx.eot?t=xxx#iefix') format('embedded-opentype'),
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgA...') format('woff2'),
url('//at.alicdn.com/t/font_xxxxxxx_xxxxxx.woff?t=xxx') format('woff'),
url('//at.alicdn.com/t/font_xxxxxxx_xxxxxx.ttf?t=xxx') format('truetype'),
url('//at.alicdn.com/t/font_xxxxxxx_xxxxxx.svg?t=xxx#iconfont') format('svg');
}
.icon-waimai1:before {
content: "\e6c3";
}
非开发模式下:
将自动获取css源文件保存至 fontPath
配置路径下,并将图标引用路径自动更改为 fontPath
本地路径。
将自动获取字体图标需要的文件保存至指定位置下的 fontPath
路径中。
webpack.config.js
const WebpackQcIconfontPlugin = require('iconfont-webpack-plugin')
module.exports = {
plugins: [
new WebpackQcIconfontPlugin({
url: '//at.alicdn.com/t/font_xxxxxxx_xxxxxx.css',
isDev: false,
iconPrefix: '.cu-icon-'
})
]
}
Output:
将在配置的输出文件下输出字体图标文件(这里我们以dist
文件夹为例):
- dist
- iconfont
- iconfont.eot
- iconfont.ttf
- iconfont.svg
- iconfont.woff
- iconfont.woff2
- iconfont.css
iconfont.css
生成结构如下:
@font-face {font-family: "iconfont";
src: url('./iconfont/iconfont.eot?t=xxx'); /* IE9 */
src: url('./iconfont/iconfont.eot?t=xxx#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgA...') format('woff2'),
url('./iconfont/iconfont.woff?t=xxx') format('woff'),
url('./iconfont/iconfont.ttf?t=xxx') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('./iconfont/iconfont.svg?t=xxx#iconfont') format('svg'); /* iOS 4.1- */
}
.cu-icon-waimai1:before {
content: "\e6c3";
}
index.html
模板文件下head将自动引入该css:
<head>
<meta charset="UTF-8">
<title>WebpackQcIconfontPlugin Template</title>
<link rel="stylesheet" href="./iconfont.css">
</head>
Events
插件开发时预留了两个事件,以便开发人员可以更个性化的使用,在阅读事件用法的时候,请确保您具备编写简单 Webpack Plugin 的能力,以及对 Tapable 有初步的认识。
iconfontCssCreateEnd
hook
hook类型: AsyncParallelHook
描述:字体文件css创建结束后调用。hook注册时将接收以下参数:
arg1:result
创建的图标css文件字符串
arg2: callback
回调函数,该函数可接受再次处理后的 result
,便于您对css文件进行压缩,合并等处理,当然您还可以不传入 result
,这时插件将不会再把生成的css文件加入到输出资源列表中,该资源就成为您的盘中餐,可以为所欲为了。
示例一:利用回调函数返回处理后的css,为其添加css代码
WebpackQcIconfontPlugin.getHooks.for('iconfontCssCreateEnd').tapAsync('MyPlugin', (result, cb) => {
result += '.test { width: 500px; }';
cb(result);
})
示例二:利用回调函数不返回值,自定义输出资源路径及名字
WebpackQcIconfontPlugin.getHooks.for('iconfontCssCreateEnd').tapAsync('MyPlugin', (result, cb) => {
compilation.assets['css/myIconFont.css'] = {
source: function () {
return result;
},
size: function () {
return result.length;
}
};
cb();
})
iconfontFileDownloadEnd
hook
hook类型: AsyncParallelHook
描述:相关引用的字体文件下载完成结束后调用。hook注册时将接收以下参数:
arg1:fontFileList
准备输出字体文件资源数组列表
arg2: callback
回调函数,该函数可接受再次处理后的 fontFileList
,便于您对 fontFileList
进行增删改等操作,当然您还可以不传入 fontFileList
,这时插件将不会再把下载的引用的字体文件加入到输出资源列表中,该资源就成为您的盘中餐,可以为所欲为了。
示例一:利用回调函数返回处理后的fontFileList,为其添加输出资源
WebpackQcIconfontPlugin.getHooks.for('iconfontFileDownloadEnd').tapAsync(pluginName, (fontFileList, cb) => {
const testFile = '测试使用的文件而已'
fontFileList.push({
filename: 'test.text',
data: {
source: function () {
return testFile;
},
size: function () {
return testFile.length;
}
}
})
cb(fontFileList)
})
示例二:用回调函数不返回值,自定义输出资源路径
WebpackQcIconfontPlugin.getHooks.for('iconfontFileDownloadEnd').tapAsync(pluginName, (fontFileList, cb) => {
fontFileList.forEach(file => {
const name = file.filename.replace('./iconfont/iconfont','./css/iconfont/iconfont')
compilation.assets[name] = file.data
});
cb()
})
plugin.js
const WebpackQcIconfontPlugin = require('../src/index')
const pluginName = 'hook-test-plugin';
class HookTestPlugin {
apply(compiler) {
compiler.hooks.compilation.tap(pluginName, (compilation) => {
// 测试 iconfontCssCreateEnd Hook
WebpackQcIconfontPlugin.getHooks.for('iconfontCssCreateEnd').tapAsync(pluginName, (result, cb) => {
result += '.test { width: 500px; }'
cb(result)
})
// 测试 iconfontFileDownloadEnd Hook
WebpackQcIconfontPlugin.getHooks.for('iconfontFileDownloadEnd').tapAsync(pluginName, (fontFileList, cb) => {
const testFile = '测试使用的文件而已'
fontFileList.push({
filename: 'test.text',
data: {
source: function () {
return testFile;
},
size: function () {
return testFile.length;
}
}
})
cb(fontFileList)
})
})
}
}
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。