Начальная загрузка и веб-пакет
Официальное руководство по включению и объединению CSS и JavaScript Bootstrap в ваш проект с помощью Webpack.
Настраивать
Мы создаем проект Webpack с Bootstrap с нуля, поэтому есть некоторые предварительные условия и предварительные шаги, прежде чем мы действительно сможем начать. Это руководство требует, чтобы у вас был установлен Node.js и вы немного знакомы с терминалом.
-
Создайте папку проекта и настройте npm. Мы создадим
my-projectпапку и инициализируем npm с-yаргументом, чтобы он не задавал нам все интерактивные вопросы.mkdir my-project && cd my-project npm init -y -
Установите Вебпак. Затем нам нужно установить наши зависимости для разработки Webpack:
webpackдля ядра Webpack,webpack-cliчтобы мы могли запускать команды Webpack из терминала иwebpack-dev-serverчтобы мы могли запускать локальный сервер разработки. Мы используем--save-dev, чтобы указать, что эти зависимости предназначены только для использования в разработке, а не для производства.npm i --save-dev webpack webpack-cli webpack-dev-server -
Установите бутстрап. Теперь мы можем установить Bootstrap. Мы также установим Popper, так как наши раскрывающиеся списки, всплывающие окна и всплывающие подсказки зависят от его позиционирования. Если вы не планируете использовать эти компоненты, вы можете опустить здесь Popper.
npm i --save bootstrap @popperjs/core -
Установите дополнительные зависимости. В дополнение к Webpack и Bootstrap нам нужно еще несколько зависимостей, чтобы правильно импортировать и связывать CSS и JS Bootstrap с Webpack. К ним относятся Sass, некоторые загрузчики и Autoprefixer.
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
Теперь, когда у нас установлены все необходимые зависимости, мы можем приступить к созданию файлов проекта и импорту Bootstrap.
Структура проекта
Мы уже создали my-projectпапку и инициализировали npm. Теперь мы также создадим наши папки srcи dist, чтобы завершить структуру проекта. Запустите следующее из my-projectили вручную создайте структуру папок и файлов, показанную ниже.
mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js
Когда вы закончите, ваш полный проект должен выглядеть так:
my-project/
├── dist/
│ └── index.html
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js
На данный момент все на месте, но Webpack не будет работать, потому что мы еще не заполнили наш webpack.config.js.
Настроить веб-пакет
С установленными зависимостями и готовой папкой проекта для начала написания кода мы теперь можем настроить Webpack и запустить наш проект локально.
-
Откройте
webpack.config.jsв своем редакторе. Поскольку он пуст, нам нужно добавить в него шаблонную конфигурацию, чтобы мы могли запустить наш сервер. Эта часть конфигурации сообщает Webpack, что нужно искать JavaScript нашего проекта, куда выводить скомпилированный код (dist), и как должен вести себя сервер разработки (вытягивание изdistпапки с горячей перезагрузкой).const path = require('path') module.exports = { entry: './src/js/main.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, devServer: { static: path.resolve(__dirname, 'dist'), port: 8080, hot: true } } -
Далее заполняем наш
dist/index.html. Это HTML-страница, которую Webpack загрузит в браузере, чтобы использовать связанные CSS и JS, которые мы добавим к ней на последующих этапах. Прежде чем мы сможем это сделать, мы должны дать ему что-то для рендеринга и включитьoutputJS из предыдущего шага.<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap w/ Webpack</title> </head> <body> <div class="container py-4 px-3 mx-auto"> <h1>Hello, Bootstrap and Webpack!</h1> <button class="btn btn-primary">Primary button</button> </div> <script src="./main.js"></script> </body> </html>Мы добавили сюда немного стилей Bootstrap с помощью
div class="container"и<button>, чтобы мы могли видеть, когда CSS Bootstrap загружается с помощью Webpack. -
Теперь нам нужен скрипт npm для запуска Webpack. Откройте
package.jsonи добавьтеstartскрипт, показанный ниже (у вас уже должен быть тестовый скрипт). Мы будем использовать этот скрипт для запуска нашего локального сервера разработки Webpack.{ // ... "scripts": { "start": "webpack serve --mode development", "test": "echo \"Error: no test specified\" && exit 1" }, // ... } -
И, наконец, мы можем запустить Webpack. Из
my-projectпапки в вашем терминале запустите этот недавно добавленный скрипт npm:npm start
В следующем и последнем разделе этого руководства мы настроим загрузчики Webpack и импортируем весь CSS и JavaScript Bootstrap.
Импорт начальной загрузки
Для импорта Bootstrap в Webpack требуются загрузчики, которые мы установили в первом разделе. Мы установили их с помощью npm, но теперь необходимо настроить Webpack для их использования.
-
Настройте загрузчики в
webpack.config.js. Теперь ваш файл конфигурации завершен и должен соответствовать приведенному ниже фрагменту. Единственная новая часть здесь —moduleраздел.const path = require('path') module.exports = { entry: './src/js/main.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, devServer: { static: path.resolve(__dirname, 'dist'), port: 8080, hot: true }, module: { rules: [ { test: /\.(scss)$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: () => [ require('autoprefixer') ] } } }, { loader: 'sass-loader' } ] } ] } }Вот краткий обзор того, зачем нам нужны все эти загрузчики.
style-loaderвставляет CSS в<style>элемент<head>HTML-страницы,css-loaderпомогает использовать@importиurl(),postcss-loaderтребуется для Autoprefixer иsass-loaderпозволяет нам использовать Sass. -
Теперь давайте импортируем CSS Bootstrap. Добавьте следующее,
src/scss/styles.scssчтобы импортировать весь исходный код Bootstrap Sass.// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";Вы также можете импортировать наши таблицы стилей по отдельности, если хотите. Подробнее читайте в нашей документации по импорту Sass .
-
Затем мы загружаем CSS и импортируем JavaScript из Bootstrap. Добавьте следующее,
src/js/main.jsчтобы загрузить CSS и импортировать все JS Bootstrap. Поппер будет автоматически импортирован через Bootstrap.// Import our custom CSS import '../scss/styles.scss' // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap'Вы также можете импортировать плагины JavaScript по отдельности, если это необходимо, чтобы уменьшить размеры пакетов:
import Alert from 'bootstrap/js/dist/alert' // or, specify which plugins you need: import { Tooltip, Toast, Popover } from 'bootstrap'Прочтите нашу документацию по JavaScript для получения дополнительной информации о том, как использовать плагины Bootstrap.
-
И вы сделали! 🎉 Теперь, когда исходный код Bootstrap Sass и JS полностью загружены, ваш локальный сервер разработки должен выглядеть так.
Теперь вы можете начать добавлять любые компоненты Bootstrap, которые хотите использовать. Обязательно ознакомьтесь с полным примером проекта Webpack , чтобы узнать, как включить дополнительный пользовательский Sass и оптимизировать свою сборку, импортируя только те части Bootstrap CSS и JS, которые вам нужны.
Оптимизация производства
В зависимости от вашей настройки вы можете захотеть реализовать некоторые дополнительные оптимизации безопасности и скорости, полезные для запуска проекта в производственной среде. Обратите внимание, что эти оптимизации не применяются в примере проекта Webpack, и их реализация зависит от вас.
Извлечение CSS
Мы style-loaderнастроили выше, чтобы удобно отправлять CSS в пакет, поэтому вручную загружать файл CSS dist/index.htmlне нужно. Однако этот подход может не работать со строгой политикой безопасности содержимого и может стать узким местом в вашем приложении из-за большого размера пакета.
Чтобы отделить CSS, чтобы мы могли загружать его непосредственно из dist/index.html, используйте mini-css-extract-loaderплагин Webpack.
Сначала установите плагин:
npm install --save-dev mini-css-extract-plugin
Затем создайте и используйте плагин в конфигурации Webpack:
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/js/main.js',
+ plugins: [new miniCssExtractPlugin()],
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
test: /\.(scss)$/,
use: [
{
- // Adds CSS to the DOM by injecting a `<style>` tag
- loader: 'style-loader'
+ // Extracts CSS for each JS file that includes CSS
+ loader: miniCssExtractPlugin.loader
},
{
После npm run buildповторного запуска появится новый файл dist/main.css, который будет содержать все CSS, импортированные с помощью src/js/main.js. Если вы сейчас просматриваете dist/index.htmlв своем браузере, стиль будет отсутствовать, как сейчас в dist/main.css. Вы можете включить сгенерированный CSS dist/index.htmlследующим образом:
--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="./main.css">
<title>Bootstrap w/ Webpack</title>
</head>
<body>
Извлечение файлов SVG
CSS Bootstrap включает несколько ссылок на файлы SVG через встроенные data:URI. Если вы определите политику безопасности контента для своего проекта, которая блокирует data:URI для изображений, эти файлы SVG не будут загружаться. Вы можете обойти эту проблему, извлекая встроенные файлы SVG с помощью функции модулей ресурсов Webpack.
Настройте Webpack для извлечения встроенных файлов SVG следующим образом:
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
},
module: {
rules: [
+ {
+ mimetype: 'image/svg+xml',
+ scheme: 'data',
+ type: 'asset/resource',
+ generator: {
+ filename: 'icons/[hash].svg'
+ }
+ },
{
test: /\.(scss)$/,
use: [
После npm run buildповторного запуска вы обнаружите, что файлы SVG извлечены в dist/iconsCSS и на них правильно ссылаются.
Видите здесь ��то-то неправильное или устаревшее? Пожалуйста , откройте вопрос на GitHub . Нужна помощь в устранении неполадок? Найдите или начните обсуждение на GitHub.