OTS parsing error: invalid version tag解决方法
采用Webpack技术对css、less、scss以及ttf字体文件进行打包处理，在打包过程中经常会遇到各种问题。例如去年使用的语法结构，在今天的应用中可能会导致各种问题出现。毕竟语法是不断完善的，在学习过程中难免会感到困惑的时候。
过度纠结并不可取；等到积累了一定的经验后，
对前面的内容进行适当调整，
最终能够达到预期的效果。
目标：打包字体文件 png|woff|woff2|svg|ttf|eot
工具： 就是使用webpack工具
基础：适合具有node基础的开发人员适用
需要下载的插件包
CSS解析器将处理外部CSS文件；文件管理器负责管理各种资源；HTML内联页面生成器是一种能够在虚拟内存中创建嵌入式HTML页面的应用程序。
CSS样式提取器负责将解析后的样式应用到HTML文档并放置在header部分；URL解析模块管理所有外部链接信息；打包引擎负责整合项目中的各种组件；提供了一系列简便快捷的小工具用于自定义打包配置；Dev server构建了一个用于开发环境中的虚拟服务器系统。
静态编译: webpack
动态编译[开启dev 通过http协议访问] : npm run dev
1.网站下载iconfont字体文件包
2.根据字体文件包中提示构建css文件
3.引入html文件测试
【此步骤省略，字体包中有案例】
配置man.js
//导入资源
import './css/index.css';
代码解释index.htm
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<!-- <link rel="stylesheet" href="./css/index.css" /> -->
</head>
<body>
<span class="iconfont afont"></span>
<span class="iconfont afont"></span>
<span class="iconfont afont"></span>
<span class="iconfont afont"></span>
<span class="iconfont afont"></span>
</body>
</html>
代码解释index.css
@font-face {
font-family: 'iconfont';
src: url('./icon/iconfont.ttf?t=1650505701581') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
span{
height: 100px;
width: 100px;
/* display: block; */
}
.afont{
font-size: 150px;
}
代码解释项目初始化
module的下载这里不在累赘
重点：指定类型为'javascript/auto' //必须指定类型 虽然不清楚具体情况 即使是在较早的版本中也需要明确指定类型才能正常加载 了解这一设置原理的朋友可以在下方留言区分享更多细节
没有指定type: 'javascript/auto'
无法解析下载的字体，请查看以下具体路径信息：
http://localhost:3000/36bdff0eed0ef8904943.ttf?t=1650505701581
在localhost上尝试解析时出现了一个OTS错误：无效版本标识符
webpack.config.js文件配置[完整解决]
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/main.js',
output:{
filename:'bundle.js',
path:resolve(__dirname,'dist')
},
module:{
rules:[
{test:/\.css$/, use:['style-loader','css-loader']},//css
// {exclude: /\.(css|js|html)$/, //排除打包其他资源(除了html js css资源意外的资源)这个静态打包字体文件
// loader:'file-loader'
// },
//{test:/\.(png|woff|woff2|svg|ttf|eot)$/, use:'url-loader?esModule=false&limit=10*1024&name=[hash:8]-[name].[ext]' ,type: 'javascript/auto'},
{test:/\.(png|woff|woff2|svg|ttf|eot)$/,
loader:'url-loader',
options: {
limit: 10*1024, //这里要足够大这样所有的字体图标都会打包到css中
esModule:false,
name:"[hash:8]-[name].[ext]"
},
// type: 'javascript/auto' //必须指定类型
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html'
})
],
mode:'development'
}
代码解释使用npm run dev 开启虚拟服务器
打开浏览器地址栏访问http://localhost:3000, 页面中的iconfont字体显示正常