Question

为什么webpack打包font-awesome会显示找不到字体

Answer 1

1、为什么我用webpack打包font-awesome，虽然页面没什么问题，但是控制台报错说找不到字体？

2、引入的地方：
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';

3、我找到font-awesome.css:

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

4、webpack.config.js配置：

{
test: /\.css$/,
loader: ExtractText.extract('style-loader', 'css-loader')
},
{
test: /\.(png|gif|jpg|jpeg)$/,
loader: "url?name=img/[hash:8].[ext]"
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?name=font/[name].[ext]&limit=10000&minetype=application/font-woff'
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?name=font/[name].[ext]&limit=10&minetype=application/font-woff'
},