猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

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

我的webpack设置:

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

出现的错误：

https://img3.mukewang.com/5ba1b0ec0001296919080055.jpg

浮云间
浏览 1785回答 1
1回答

qq_遁去的一_1

你的配置里是name=fonts/[name]-[hash].[ext]，但请求字体文件的URL，看起来并没有符合这个标准。你确定你的字体是按照你的要求生成在指定位置了么？补充：我贴一个我以前用的配置吧：var path = require('path');var webpack = require('webpack');module.exports = {&nbsp; &nbsp; entry: {&nbsp; &nbsp; &nbsp; &nbsp; index: './index.js'&nbsp; &nbsp; },&nbsp; &nbsp; output: {&nbsp; &nbsp; &nbsp; &nbsp; path: path.resolve(__dirname, 'dist'),&nbsp; &nbsp; &nbsp; &nbsp; filename: 'bundle.js',&nbsp; &nbsp; &nbsp; &nbsp; publicPath: '/dist/'&nbsp; &nbsp; },&nbsp; &nbsp; module: {&nbsp; &nbsp; &nbsp; &nbsp; loaders: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test: /\.css$/,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: 'style!css'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test: /\.js$/,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: 'babel?{"presets":["es2015"]}',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exclude: /(node_modules)/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test: /\.(eot|svg|ttf|woff|woff2|png)\w*/,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: 'file'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; plugins: [&nbsp; &nbsp; &nbsp; &nbsp; new webpack.ProvidePlugin({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $: 'jquery',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery: 'jquery',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'window.jQuery': 'jquery'&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; ]};然后我在入口文件index.js这么引入bootstrap:import&nbsp;'jquery';&nbsp;import&nbsp;'bootstrap/dist/js/bootstrap';&nbsp;import&nbsp;'bootstrap/dist/css/bootstrap.css';&nbsp;//下面你原先该写什么，写什么index.html里就引入一个bundle.js就好了<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title></title></head><body>&nbsp; &nbsp; <!-- 该写什么，写什么 --></span><script type="text/javascript" src="dist/bundle.js"></script></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript