Bootstrap & Font-awesome с Webpack | Font-awesome not loading icon
Я пытаюсь выполнить простой запрос Bootstrap и Font-awesome с Webpack. Мне удалось загрузить Bootstrap CSS, но Font-awesome работает неправильно.
Это то, что я получаю как результат
![введите описание изображения здесь]()
Мои коды приведены ниже. Пожалуйста, помогите мне определить, что я здесь делаю.
Ресурс: код Github доступен здесь.
ТИА
Ariful
package.json
{
"name": "",
"version": "0.0.1",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack -w"
},
"license": "MIT",
"devDependencies": {
"css-loader": "^0.21.0",
"expose-loader": "^0.7.0",
"file-loader": "^0.8.4",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.2"
},
"dependencies": {
"admin-lte": "^2.3.2",
"bootstrap": "^3.3.5",
"bootstrap-webpack": "0.0.5",
"exports-loader": "^0.6.2",
"extract-text-webpack-plugin": "^0.8.2",
"font-awesome": "^4.4.0",
"font-awesome-webpack": "0.0.4",
"imports-loader": "^0.6.5",
"jquery": "^2.1.4",
"less": "^2.5.3",
"less-loader": "^2.2.1"
}
}
Точка входа: index.js
var $ = require('jquery');
require('expose?$!expose?jQuery!jquery');
require("bootstrap-webpack");
require('./node_modules/font-awesome/css/font-awesome.css');
require('./resources/css/style.css');
$('h1').html('<i class="fa fa-bars"></i> this is bootstrap');
console.log('hi there');
Конфигурационный файл Webpack webpack.config.js
module.exports = {
entry: './index.js',
output: {
path: 'public/assets/',
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{test: /\.css$/, loader: "style!css!" },
{ test: /\.less$/, loader: "style!css!less!" },
//bootstrap
{test: /\.(woff|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'},
//font-awesome
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
},
}
Ответы
Ответ 1
Проверьте свою консоль отладки F12 и просмотрите сведения о веб-браузере об ошибке для данных файлов.
Ваш веб-сервер не обслуживает файлы .woff и .woff2 с правильным типом mime и, следовательно, они вообще не загружаются с точки зрения браузера-клиента.
Вам нужно изменить сторону веб-сервера, чтобы добавить поддержку .woff файлов, например, в IIS Express в Web.config вы должны иметь:
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
и внутри webpack.config.js у вас должен быть загрузчик модуля, например
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'url-loader'
}
Ответ 2
Я знаю, что это вопрос на 1 год, но на всякий случай, если кто-то окажется в этом от Google:
Существует известная проблема css-loader, генерирующая неправильные пути к файлу. Это не произойдет в сборке сборки, но все еще раздражает, когда рендерит квадраты в режиме разработки.
Пока эта проблема не будет устранена, вы можете отключить исходную карту css-loader, чтобы увидеть шрифт, правильно обработанный в процессе разработки. Найдите где-нибудь в своем конфигураторе webpack, который пишет css?sourceMap
и измените его на css
.