Bootstrap & Webpack
Oficialus vadovas, kaip įtraukti ir susieti Bootstrap CSS ir JavaScript į savo projektą naudojant Webpack.
Sąranka
Kuriame Webpack projektą naudodami „Bootstrap“ nuo nulio, todėl tam, kad galėtume pradėti, reikia atlikti tam tikras būtinas sąlygas ir žingsnius. Šiame vadove reikia turėti įdiegtą Node.js ir šiek tiek susipažinti su terminalu.
-
Sukurkite projekto aplanką ir nustatykite npm. Sukursime
my-projectaplanką ir inicijuosime npm su-yargumentu, kad jis neužduotų mums visų interaktyvių klausimų.mkdir my-project && cd my-project npm init -y -
Įdiekite Webpack. Toliau turime įdiegti savo „Webpack“ kūrimo priklausomybes:
webpack„Webpack“ pagrindui,webpack-clikad galėtume paleisti „Webpack“ komandas iš terminalo irwebpack-dev-serverpaleisti vietinį kūrimo serverį. Mes naudojame--save-devsignalą, kad šios priklausomybės skirtos tik plėtrai, o ne gamybai.npm i --save-dev webpack webpack-cli webpack-dev-server -
Įdiekite „Bootstrap“. Dabar galime įdiegti „Bootstrap“. Taip pat įdiegsime „Popper“, nes mūsų išskleidžiamieji meniu, iššokantys langai ir patarimai priklauso nuo jo padėties. Jei neplanuojate naudoti šių komponentų, galite praleisti Popper čia.
npm i --save bootstrap @popperjs/core -
Įdiekite papildomas priklausomybes. Be Webpack ir Bootstrap, mums reikia dar kelių priklausomybių, kad galėtume tinkamai importuoti ir sujungti Bootstrap CSS ir JS su Webpack. Tai yra „Sass“, kai kurie krautuvai ir „Autoprefixer“.
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
Dabar, kai įdiegėme visas būtinas priklausomybes, galime pradėti kurti projekto failus ir importuoti „Bootstrap“.
Projekto struktūra
Mes jau sukūrėme my-projectaplanką ir inicijavome npm. Dabar taip pat sukursime savo srcir distaplankus, kad užbaigtume projekto struktūrą. Vykdykite toliau nurodytus veiksmus iš my-project, arba rankiniu būdu sukurkite toliau pateiktą aplanko ir failo struktūrą.
mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js
Kai baigsite, visas jūsų projektas turėtų atrodyti taip:
my-project/
├── dist/
│ └── index.html
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js
Šiuo metu viskas yra tinkamoje vietoje, bet Webpack neveiks, nes dar neužpildėme savo webpack.config.js.
Konfigūruokite „Webpack“.
Įdiegę priklausomybes ir paruošę projekto aplanką, kad galėtume pradėti koduoti, dabar galime sukonfigūruoti „Webpack“ ir vykdyti projektą vietoje.
-
Atidarykite
webpack.config.jssavo redaktoriuje. Kadangi jis tuščias, turėsime pridėti tam tikrą pagrindinę konfigūraciją, kad galėtume paleisti serverį. Ši konfigūracijos dalis nurodo „Webpack“ ieškoti mūsų projekto „JavaScript“, kur išvesti sukompiliuotą kodą į (dist) ir kaip turėtų veikti kūrimo serveris (ištraukti išdistaplanko su karštu perkrovimu).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 } } -
Toliau užpildome savo
dist/index.html. Tai yra HTML puslapis, kurį „Webpack“ įkels į naršyklę, kad panaudotų susietą CSS ir JS, kurį pridėsime vėliau. Kad galėtume tai padaryti, turime duoti jam ką nors pateikti ir įtrauktioutputJS iš ankstesnio veiksmo.<!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>Čia įtraukiame šiek tiek „Bootstrap“ stiliaus su
div class="container"ir<button>, kad pamatytume, kada „Bootstrap“ CSS įkeliamas naudojant „Webpack“. -
Dabar mums reikia npm scenarijaus, kad paleistume „Webpack“. Atidarykite
package.jsonir pridėkite toliau pateiktąstartscenarijų (jau turėtumėte turėti bandomąjį scenarijų). Šį scenarijų naudosime vietiniam Webpack dev serveriui paleisti.{ // ... "scripts": { "start": "webpack serve --mode development", "test": "echo \"Error: no test specified\" && exit 1" }, // ... } -
Ir galiausiai galime pradėti Webpack. Iš
my-projectsavo terminalo aplanko paleiskite tą naujai pridėtą npm scenarijų:npm start
Kitame ir paskutiniame šio vadovo skyriuje nustatysime „Webpack“ įkroviklius ir importuosime visą „Bootstrap“ CSS ir „JavaScript“.
Importuoti Bootstrap
Norint importuoti „Bootstrap“ į „Webpack“, reikia krautuvų, kuriuos įdiegėme pirmajame skyriuje. Įdiegėme juos naudodami npm, bet dabar reikia sukonfigūruoti „Webpack“, kad juos naudotų.
-
Nustatykite krautuvus
webpack.config.js. Jūsų konfigūracijos failas dabar baigtas ir turėtų atitikti toliau pateiktą fragmentą. Vienintelė nauja dalis čia yramoduleskyrius.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' } ] } ] } }Pateikiame santrauką, kodėl mums reikia visų šių krautuvų.
style-loaderįterpia CSS į HTML puslapio<style>elementą , padeda naudoti ir , reikalingas Autoprefixer ir leidžia mums naudoti Sass.<head>css-loader@importurl()postcss-loadersass-loader -
Dabar importuokime „Bootstrap“ CSS. Pridėkite toliau pateiktą,
src/scss/styles.scsskad importuotumėte visą „Bootstrap“ šaltinį „Sass“.// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";Taip pat galite importuoti mūsų stilių lapus atskirai, jei norite. Norėdami gauti daugiau informacijos, skaitykite mūsų Sass importavimo dokumentus .
-
Tada įkeliame CSS ir importuojame „Bootstrap“ JavaScript. Pridėkite toliau pateiktą,
src/js/main.jskad įkeltumėte CSS ir importuotumėte visą „Bootstrap“ JS. „Popper“ bus automatiškai importuotas per „Bootstrap“.// Import our custom CSS import '../scss/styles.scss' // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap'Taip pat galite importuoti „JavaScript“ papildinius atskirai, jei reikia, kad sumažintumėte paketų dydį:
import Alert from 'bootstrap/js/dist/alert' // or, specify which plugins you need: import { Tooltip, Toast, Popover } from 'bootstrap'Norėdami gauti daugiau informacijos apie tai, kaip naudoti „Bootstrap“ papildinius, skaitykite „JavaScript“ dokumentus .
-
Ir viskas! 🎉 Kai Bootstrap šaltinis Sass ir JS yra visiškai įkelti, jūsų vietinis kūrimo serveris dabar turėtų atrodyti taip.
Dabar galite pradėti pridėti bet kokius „Bootstrap“ komponentus, kuriuos norite naudoti. Būtinai peržiūrėkite visą Webpack pavyzdinį projektą , kaip įtraukti papildomą tinkintą Sass ir optimizuoti savo kūrimą importuodami tik jums reikalingas Bootstrap CSS ir JS dalis.
Gamybos optimizavimas
Priklausomai nuo jūsų sąrankos, galbūt norėsite įdiegti kai kuriuos papildomus saugos ir greičio optimizavimus, naudingus vykdant projektą gamyboje. Atminkite, kad šie optimizavimai netaikomi Webpack pavyzdiniame projekte ir jūs turite juos įgyvendinti.
CSS ištraukimas
Aukščiau style-loadersukonfigūravome patogiai siunčia CSS į paketą, todėl dist/index.htmlnereikia rankiniu būdu įkelti CSS failo. Tačiau šis metodas gali neveikti laikantis griežtos turinio saugos politikos ir gali tapti kliūtimi jūsų programoje dėl didelio paketo dydžio.
Norėdami atskirti CSS, kad galėtume jį įkelti tiesiai iš dist/index.html, naudokite mini-css-extract-loaderWebpack papildinį.
Pirmiausia įdiekite papildinį:
npm install --save-dev mini-css-extract-plugin
Tada sukurkite ir naudokite papildinį Webpack konfigūracijoje:
--- 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
},
{
Paleidus npm run builddar kartą, bus naujas failas dist/main.css, kuriame bus visas CSS, kurį importavo src/js/main.js. Jei peržiūrėsite dist/index.htmlnaršyklėje dabar, stiliaus trūks, kaip dabar yra dist/main.css. Sukurtą CSS galite įtraukti taip 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 failų ištraukimas
„Bootstrap“ CSS apima kelias nuorodas į SVG failus per eilutinius data:URI. Jei savo projektui apibrėžiate turinio saugos strategiją, kuri blokuoja data:vaizdų URI, šie SVG failai nebus įkeliami. Šią problemą galite išspręsti ištraukdami įterptuosius SVG failus naudodami „Webpack“ išteklių modulių funkciją.
Sukonfigūruokite „Webpack“, kad ištrauktumėte įterptus SVG failus, pavyzdžiui:
--- 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: [
Paleidę npm run builddar kartą, rasite SVG failus, ištrauktus į dist/iconsCSS ir tinkamai nuorodos.
Matote čia kažką ne taip ar pasenę? Atidarykite problemą „GitHub“ . Reikia pagalbos sprendžiant triktis? Ieškokite arba pradėkite diskusiją „GitHub“.