webpack打包font时的路径问题

使用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提取路径为 "../../"。