首页 > webpack打包字体文件时候为什么路径不对?

webpack打包字体文件时候为什么路径不对?

我打算将bootstrap打包进我的项目,但是boostrap需要一些字体文件的依赖,我用了file-loader是打包成功了,但是看起来路径不对,要怎么解决?

我的webpack设置:

            {
                test: /\.(woff|woff2|eot|ttf)$/i,
                loader: "file-loader?name=fonts/[name]-[hash].[ext]"
            }

出现的错误:


你的配置里是name=fonts/[name]-[hash].[ext],但请求字体文件的URL,看起来并没有符合这个标准。

你确定你的字体是按照你的要求生成在指定位置了么?

补充:

我贴一个我以前用的配置吧:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: {
        index: './index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style!css'
            },
            {
                test: /\.js$/,
                loader: 'babel?{"presets":["es2015"]}',
                exclude: /(node_modules)/
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png)\w*/,
                loader: 'file'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

然后我在入口文件index.js这么引入bootstrap:

import 'jquery';
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

//下面你原先该写什么,写什么

index.html里就引入一个bundle.js就好了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 该写什么,写什么 -->
</span>

<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>
【热门文章】
【热门文章】