问题现象:
使用element-ui,字体图表显示“方块”。
项目加载后,看加载文件,并没有.woff
或.woff2
或.ttf
等字体图标文件。
也没有字体图表转换后的base64,文件。
环境;
webpack4,vue2
有问题的代码:
webpack.base.conf.js:
module: {
rules: [
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
// name: './fonts/[name].[hash:7].[ext]'
}
}
]
}
]
}
util.js
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'development'
? config.dev.assetsSubDirectory
: config.build.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
.woff 文件在之前webpack3时,可以转换为base64图正常显示字体图标,升级webpac4后,就加载不出来了。
修改后的配置:
webpack.base.conf.js:
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
// 修改如下:
name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
esModule: false
}
}
]
},
webpack4中,需要在url-loader配置esModule:false
esModule: false
作用: url-loader默认使用es6模块化解析,而html-withimg-loader引入图片是使用commonjs模块,所以要关闭url-loader的es6模块化解析,使用commonjs解析,false为关闭,true为默认值。
注意:webpack4中只需要在url-loader配置esModule,而在webpack5需要html-loader也要配置
esModule
类型:Boolean 默认:true
默认情况下,css-loader 生成使用 ES 模块语法的 JS 模块。 在某些情况下,使用 ES 模块是有益的,例如在模块串联或 tree shaking 时。
您可以使用以下方式启用ES模块语法:
webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
esModule: false,
},
},
],
},
};