OTS parsing error: invalid version tag解决方法
使用webpack打包css/less/scss/ttf等字体文件，总是会遇到出现很多的问题，程序语音语法每月都在变化，比如去年的语法结构可能在今天使用就会出现各种问题，毕竟语法是不断完善的，遇到纠结时。过多纠缠真的没必要，直到有一天做的多了，然后把前边的稍微变通一下，竟然达到想要的结果。多看多练，多思考，多做笔记自然是好。你得到的东西自然不是别人的。
目标：打包字体文件 png|woff|woff2|svg|ttf|eot
工具： 就是使用webpack工具
基础：适合具有node基础的开发人员适用
需要下载的插件包
css-loader 解析css文件的loader
file-loader 处理文件的loader
html-webpack-plugin 在虚拟内存中创建一个html页面的插件"style-loader 将解析得到的css样式文件插入style并置放head标签的loader
url-loader 解析url路径的loader
webpack 代码编译的工具
webpack-cli 为开发人员提供了一组灵活的命令，以在设置自定义 webpack 项目时提高速度
webpack-dev-server 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的下载这里不在累赘
重点：type: 'javascript/auto' //必须指定类型 虽然不知道什么，好像是在哪个版本之前必须要指定type，才会显示加载正常，知道的小伙伴能在下方评论区说说具体的原因。
没有指定type: 'javascript/auto'
Failed to decode downloaded font: http://localhost:3000/36bdff0eed0ef8904943.ttf?t=1650505701581
localhost/:1 OTS parsing error: invalid version tag
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字体文件显示正常了