webpack打包font时的路径问题

最新推荐文章于 2024-09-06 14:57:08 发布

子非吾

最新推荐文章于 2024-09-06 14:57:08 发布

阅读量1.2k

点赞数

分类专栏： Web前端 webpack 文章标签： webpack vue

本文链接：https://blog.csdn.net/qq940390/article/details/102768202

版权

Web前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

使用Webpack打包Build时，对于 woff、woff2、eot、ttf、otf 这些类型的font文件路径有问题，一般常见的错误路径就是 static/css/static/css/fonts，出现这样的问题，大多数就是配置上的问题，下面来看看正确的配置。

/*webpack.base.conf.js*/
module: {
    rules: {
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'file-loader',
            options: {
                limit: 10000,
                name: 'static/fonts/[name].[hash:7].[ext]'
            }
        }
    }
}

font类型的文件需要使用file-loader，而不是url-loader。

/*webpack.prod.conf.js*/
module: {
    rules: [
        {
            test: /\.css$/,
            use: cssExtra.extract({
                fallback: 'vue-style-loader',
                use: 'css-loader',
                publicPath: '../../'
            })
        },
    ]
},

生产环境中配置的css提取路径为 "../../"。