Webpack问题导入font-awesome库 [英] Webpack problems importing font-awesome library
本文介绍了Webpack问题导入font-awesome库的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在构建一个React应用程序,需要导入font-awesome CSS,但是我收到一个错误,说该模块无法解析woff2文件。
I'm building a React application that will require font-awesome CSS to be imported, but I'm getting an error saying that the module cannot parse the woff2 files.
以下是我的代码:
import React from 'react';
import ReactDOM from 'react-dom';
require('css!../node_modules/bootstrap/dist/css/bootstrap.css')
require('css!../node_modules/font-awesome/css/font-awesome.css')
import '../node_modules/bootstrap/dist/js/bootstrap.js'
import Dashboard from './components/Dashboard/Dashboard';
ReactDOM.render(
<Dashboard/>,
document.getElementById('react-container')
);
这是我在浏览器中收到的错误:
This is the error I'm getting in the browser:
When running on browser I'm getting the following error:
bundle.js:669 ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: D:\DEV\airwaysprj\node_modules\font-awesome\fonts\fontawesome-webfont.woff2?v=4.7.0 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:4)
at Parser.pp$4.raise (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2468:15)
at Parser.pp$7.next (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2413:10)
at Parser.pp$3.parseIdent (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:2191:10)
at Parser.pp$3.parseExprAtom (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1774:21)
at Parser.pp$3.parseExprSubscripts (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1597:21)
@ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:479-532
[1]: https://webpack.github.io/docs/stylesheets.html
我的 webpack.config.js
file:
var path = require('path');
module.exports = {
entry: "./client/app.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js",
publicPath: "/dist"
},
module: {
loaders: [
{
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
],
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader']
},
{
test: /images\/.*\.(png|jpg|svg|gif)$/,
loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
},
{
test: /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader?name="[name]-[hash].[ext]"',
}
]
},
watch: true
}
帮助我们解决这个问题。
Help appreciated to solve this issue.
推荐答案
来自 webpack.config.js 的此配置/ e8e941e68308d3b40ef6rel =nofollow noreferrer>这里解决了这个问题:
This configuration for webpack.config.js
from here solved the problem:
var config = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css?sourceMap'
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}]
}
};
module.exports = config;
这篇关于Webpack问题导入font-awesome库的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文