Webpack — настройка и загрузка файлов поставщиков, таких как bootstrap, font-awesome и т. д.
Недавно я начал создавать приложение MEAN stack 2.0, чтобы догнать Angular 2. Я новичок в webpack и столкнулся с некоторыми проблемами при попытке использовать тему загрузки, fontawesome, jquery и т. д. Я подумал, что поделюсь некоторыми своими решениями со всеми. .
Примечание. Сначала я выполнил шаги с сайта angular.io для настройки веб-пакета.
https://angular.io/docs/ts/latest/guide/webpack.html#!#entries-outputs
Проблема 1:
Как и в упомянутой документации, я связал свои файлы приложений с app.ts, а файлы поставщиков — с vendor.ts. Как загрузить bootstrap, fontawesome и bootswatch css?
Решение:
Добавьте следующие требования к поставщику.
import 'jquery';
import 'bootstrap/dist/js/bootstrap';
require('!!style!css!font-awesome/css/font-awesome.min.css');< br /> require('!!style!css!bootstrap/dist/css/bootstrap.css');
require('!!style!css!bootswatch/paper/bootstrap.min.css');
Проблема 2:
В приведенном ниже загрузчике возникла проблема с разрешением файлов шрифтов с потрясающими шрифтами из-за версии. Я использовал url-loader, потому что я думаю, что проблема была с URL-адресами импорта в файлах шрифтов. Это сработало, но повлияло на загрузку значков глифов.
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
Решение:
Простое решение состоит в том, чтобы игнорировать управление версиями файлов с потрясающими шрифтами.
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)?(\?v=[0–9]\.[0–9]\ .[0–9])?$/,
loader: 'file?name=fonts/[name].[hash].[ext]?'
},
Проблема 3
Bootstrap загружается, как и jQuery; но webpack не распознает jQuery. выдает ошибку "jQuery не определен".
Решение.Добавлен подключаемый модуль для jQuery для внедрения неявных глобальных переменных.
webpack.ProvidePlugin({
jQuery: ‘jquery’,
$: ‘jquery’,
jquery: ‘jquery’
})
Я буду регулярно публиковать больше обновлений и о своих приключениях с Angular2. Если есть что-то, что я могу улучшить или что-то не так, пожалуйста, прокомментируйте и дайте мне знать.
