我打算将bootstrap打包进我的项目，但是boostrap需要一些字体文件的依赖，我用了file-loader是打包成功了，但是看起来路径不对，要怎么解决？我的webpack设置: { test: /\.(woff|woff2|eot|ttf)$/i, loader: "file-loader?name=fonts/[name]-[hash].[ext]" } 出现的错误：

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

2 个回答

leftstick

✓ 已被采纳

你的配置里是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>

长寿之都扬州小严

4517

发布于
2020-03-23

其实吧，你用【url-loader】，替换【file-loader】就好了。

至于原因，我也不知道为什么

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

什么是闭包？闭包有哪些应用场景？

求一个能输入需求就可以写出代码的网站，支持一键部署？