tris webpack boilerplate
1.0.0
Leider fehlt mir derzeit die Zeit/Begeisterung, dieses Projekt weiterzuführen. Ich empfehle, dieses Projekt zu forken oder seine Quelle zu lesen, um zu erfahren, wie es aufgebaut ist.
Dieses Webpack-Boilerplate richtet sich an Anfänger, Fortgeschrittene und fortgeschrittene Entwickler, die schnell statische Websites erstellen und gleichzeitig die richtigen Optimierungen erzielen möchten, um bei Google Page Speed Insights und Google Lighthouse Reports perfekt abzuschneiden . Dies ist eine Weiterentwicklung des Tris-Gulp-Boilerplates, jetzt mit Webpack 4. Webpack ist der neue Standard für die Bündelung von JS, zu dem Gulp nicht in der Lage war. Zum Glück kann Webpack sowohl Aufgaben ausführen als auch js bündeln?
Das Ziel dieses Projekts/Boilerplates ist es, die folgenden Personen zu erreichen:
Die Anfänger ? – die zwar Gulp/Webpack/Node/Npm verwenden, aber dennoch ausführlichere Erklärungen benötigen als die erfahreneren Entwickler. Sie wollen, dass die Dinge funktionieren, aber sie wollen auch wissen , wie und warum .
Die Nebenprojekt-Hitler ?♀️ – diejenigen mit all den tollen Ideen, die aber keine Zeit mit der Einrichtung verschwenden wollen. Sie müssen ihre Ideen, Apps und Websites schnell in den Browser übertragen.
Der Zwangsmensch ♂️ – Menschen, die es lieben, die perfekten Ergebnisse bei Leistungs- und Optimierungsberichten zu erzielen. Menschen, die digital organisiert sind und stolz darauf sind, dass alle ihre Dateien minimiert, komprimiert, gezippt und versandbereit sind!
Fühlen Sie sich frei, dieses Repo zu teilen und Ihren eigenen Workflow basierend auf dieser Vorlage zu erstellen! Jeder ist ein bisschen anders, das verstehe ich.
Sie benötigen Git und node.js auf Ihrem Computer, bevor Sie es ausführen können.
git clone https://github.com/tr1s/tris-webpack-boilerplate.git your-project-name
cd your-project-name && rm -rf .git
npm install
npm start
Sie sind bereit, beginnen Sie mit dem Codieren ?? !
Entfernen Sie alles im Ordner src/styles/ , src/index.html und src/index.scss/ wenn Sie völlig neu beginnen und/oder Ihren eigenen Sass-Workflow erstellen möchten. Ich habe meine Ordnerstruktur nach dem 7-1-Muster aufgebaut.
npm run build , wenn Sie bereit sind, Ihre Website auf die FTP-/Hosting-Plattform Ihrer Wahl hochzuladen. Dadurch wird ein dist -Ordner mit allen optimierten und komprimierten Website-Assets erstellt.
Wenn Sie eine ausführliche Erklärung darüber wünschen, wie alles funktioniert, lesen Sie sich bitte die folgenden Funktionen durch. Ansonsten programmieren Sie weiter und haben Sie Spaß :)
tris-webpack-boilerplate
Verwendung
Funktionen/Inhalte
Funktionen erklärt
Webpack-Konfigurationssplit
Webpack-Entwicklungsserver
HTML-Assets und Minimierung
404-Seite nicht gefunden
SCSS zu CSS + Optimierungen
ES6-Transpilierung
Browserliste
Bildressourcen + Komprimierung
Laden von Schriftarten + Vorladen
Asset-Komprimierung
Bereinigen Sie das Webpack-Plugin
Quellkarten
Favicon-Generierung
Zuerst offline und zwischenspeichern
Progressive Web-App (PWA)
Gotcha's
Mitwirken
Anstatt eine große webpack.config.js zu haben, werden wir unsere Produktions- und Entwicklungs-Builds in zwei neue Konfigurationen mit den Namen webpack.dev.js und webpack.prod.js aufteilen. Konfigurationen, die wir sowohl für die Entwicklung als auch für die Produktion wünschen, werden in die Konfiguration webpack.common.js aufgenommen.
Wenn wir npm start ausführen, wird der Entwicklungs-Build basierend auf der webpack.dev.js -Konfiguration ausgeführt, die auch die zusammengeführten webpack.common.js -Konfigurationen enthält. Lesen Sie mehr dazu in der Webpack-Dokumentation.
/* wenpack.dev.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* führt die webpack.common.js zusammen und fügt sie dann hinzu Ihr Extra */module.exports = merge(common, {
Modus: „Entwicklung“,
/* der Rest des Codes kommt hierher */}); Wenn wir npm run build ausführen, wird der Produktions-Build basierend auf der webpack.prod.js -Konfiguration ausgeführt, die auch die zusammengeführten webpack.common.js -Konfigurationen enthält.
/* webpack.prod.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* führt die webpack.common.js zusammen und fügt sie dann hinzu Ihr Extra */module.exports = merge(common, {
Modus: „Produktion“,}); Wir möchten, dass unsere Entwicklungs- und Produktions-Builds visuell im Browser die gleichen Ergebnisse liefern. Sie möchten nicht mit dem Codieren fertig sein, den Build ausführen und dann beim Build eine völlig andere Website mit beispielsweise fehlenden Bildern haben. Deshalb haben wir webpack.common.js um alle Loader und die Asset-Verwaltung zu verwalten. Die webpack.dev.js wird mit einer leichteren Quellkarte etwas anders sein. Schließlich übernimmt webpack.prod.js alle letzten Phasen, um Ihre Website in die Produktion zu bringen. Dazu gehören Bildkomprimierung, Asset-Komprimierung (gzip), Asset-Minimierung, Favicon-Generierung, Caching und die Schaffung eines Offline-First-Erlebnisses.
Ich werde im Folgenden auf jeden Prozess eingehen.
Der Webpack-Dev-Server wird in package.json konfiguriert. npm start führt den Server aus und öffnet Ihr Projekt im Browser mithilfe der webpack.dev.js -Konfiguration. npm start ist das Standardskript von npm, Sie müssen also nicht run hinzufügen. Für das Build-Skript müssen Sie jedoch npm run build eingeben.
"scripts": { "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js"}, Wir verwenden den HTML-Loader, um HTML als String zu exportieren und die Ausgabe zu minimieren. Dadurch können Sie Ihre src/index.html in Ihre src/index.js importieren. Wir können den HTML-Code einfach mit einer Loader-Option minimize: true , deshalb belassen wir ihn in webpack.common.js anstatt ihn nach webpack.prod.js zu verschieben.
/* webpack.common.js */{
test: /.html$/,
verwenden: [{loader: 'html-loader',optionen: { minimieren: true}
}]},/* src/index.js */import "./index.html";
Anschließend verwenden wir das HTML-Webpack-Plugin, um eine neu generierte index.html mit allen korrekten Asset-Importen zu erstellen.
Mit der Option template: “ beziehen Sie Ihren Quell-HTML-Code. Sie können Ihre eigene HTML-Vorlage, eine Lenkervorlage oder eine dieser anderen Vorlagen verwenden.
Mit der Option inject: “ werden Ihre Vermögenswerte verwendet. Webpack platziert Ihr gebündeltes webpack-bundle.js -Skript standardmäßig unten im Textkörper, aber hier habe ich es auf head umgestellt, da wir das script-ext-html-webpack-plugin verwenden, um dem ein defer -Attribut hinzuzufügen Erstellen Sie ein Skript und platzieren Sie es im Kopf der Website. Dies hilft bei der Leistung.
/* webpack.common.js */const HtmlWebpackPlugin = require('html-webpack-plugin');const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");plugins: [
neues HtmlWebpackPlugin({title: 'tris-webpack-boilerplate',filename: 'index.html',template: './src/index.html',inject: 'head'
}),
neues HtmlWebpackPlugin({title: 'tris-404-page',filename: '404.html',template: './src/404.html',inject: 'head'
}),
neues ScriptExtHtmlWebpackPlugin({defaultAttribute: 'defer'
}),], Fügen Sie weitere new HtmlWebpackPlugin({}) -Plugins hinzu, wenn Sie eine mehrseitige Website haben möchten. Benennen Sie die Seite entsprechend mit dem title: Schlüssel.
Netlify ist ein fantastischer kostenloser Dienst, mit dem Sie Ihre Websites verwalten und bereitstellen können. Netlify sucht automatisch nach einer 404.html und lädt diese Seite, wenn jemand versucht, einen defekten Link auf Ihrer Website zu öffnen. Sie müssen sich also keine Sorgen machen.
Wenn Sie einen anderen Dienst nutzen, recherchieren Sie bitte, wie Sie Ihre 404.html -Seite verlinken können, damit sie aktiv ist. Dies ist eine großartige Möglichkeit, Leute auf Ihre Hauptseite zurückzuleiten, wenn sie auf einen defekten Link landen.
Um Sass/SCSS nutzen zu können, müssen wir einige Loader verwenden, um die gewünschten Ergebnisse zu erzielen. Der CSS-Loader, der PostCSS-Loader und der Sass-Loader.
test: verwendet Regex (regulären Ausdruck), um nach Sass-, SCSS- oder CSS-Dateien zu suchen, und führt sie dann durch diese drei Loader aus, die um das Mini-CSS-Extract-Plugin gewickelt sind, das dann eine einzelne CSS-Datei für Sie generiert zur Verwendung in der Produktion.
Lesen Sie mehr über das Konzept der Lader.
/* webpack.common.js */{
test: /.(sa|sc|c)ss$/,
verwenden: [MiniCssExtractPlugin.loader,{ Loader: 'css-loader', Optionen: {sourceMap: true }},{ Loader: 'postcss-loader', Optionen: {sourceMap: true }},{ Loader: 'sass-loader ', Optionen: {sourceMap: true }}
]}, Im zweiten Teil der Loader-Sequenz, dem postcss-loader , verkleinern Sie Ihr CSS und setzen es automatisch voran. Dazu erstellen wir eine postcss.config.js im Stammverzeichnis des Projekts und konfigurieren sie wie folgt ...
/* postcss.config.js */const purgecss = require("@fullhuman/postcss-purgecss");module.exports = {
Plugins: [require("autoprefixer"),require("cssnano")({ preset: "default",}),purgecss({ content: ["./**/*.html"], keyframes: true,} ),
],};Informieren Sie sich über Autoprefixer und CSSNano, um es bei Bedarf besser nach Ihren Wünschen zu konfigurieren. Informieren Sie sich außerdem über PostCSS im Allgemeinen, da es ein sehr leistungsfähiges Werkzeug ist, das Sie in Ihrem Arsenal haben sollten.
Purgecss ist ein fantastisches PostCSS-Plugin, mit dem Sie ungenutztes CSS aus Ihrem Code entfernen können. Purgecss analysiert Ihre Inhalte und Ihre CSS-Dateien. Anschließend gleicht es die in Ihren Dateien verwendeten Selektoren mit denen in Ihren Inhaltsdateien ab. Es entfernt nicht verwendete Selektoren aus Ihrem CSS, was zu kleineren CSS-Dateien führt.
Es ist standardmäßig einsatzbereit, aber wenn Sie es selbst visuell testen möchten, entfernen Sie den Kommentar @import "../node_modules/bulma/bulma"; in index.scss und führen Sie dann npm run build aus und sehen Sie sich die resultierende webpack-bundle.css in Ihrem dist-Ordner an. Sie werden feststellen, dass es nicht so viel Code gibt. Entfernen Sie dann das purgecss aus Ihrer postcss.config.js und führen Sie npm run build erneut aus. Sie werden feststellen, dass Ihr CSS mehr als 10.000 Codezeilen enthält, die vom Bulma-Framework stammen. Wie Sie sehen, ist purgecss perfekt, um CSS loszuwerden, das Sie nicht verwenden, wenn Sie große Frameworks wie Bootstrap, Foundation, Bulma usw. verwenden!
Das Mini-CSS-Extract-Plugin ist der letzte Schritt, da es das CSS extrahiert und ihm vor der Ausgabe einen Namen gibt.
/* webpack.common.js */const MiniCssExtractPlugin = require("mini-css-extract-plugin");plugins: [
neues MiniCssExtractPlugin({filename: 'webpack-bundle.css',chunkFilename: '[id].css'
})], Im Grunde genommen sammelt der css-loader CSS aus allen CSS-Dateien, auf die in Ihrer Anwendung verwiesen wird, und fügt sie in einen String ein. Dann erstellt postcss-loader automatisch Präfixe und minimiert Ihre Stile, dann verwandelt sass-loader sie in ein JS-Modul, und dann extrahiert mini-css-extract-plugin das CSS aus dem JS-Modul in eine einzige CSS-Datei, die der Webbrowser analysieren kann.
Möglicherweise möchten Sie die neuesten JavaScript-Funktionen und -Syntax verwenden, diese werden jedoch noch nicht von allen Browsern unterstützt. Babel wird das für uns erledigen.
Hier testen wir alle js-Dateien, mit Ausnahme des Ordners node_modules , und führen sie dann über den babel-loader mit der Voreinstellung „babel-preset-env“ aus.
/* webpack.common.js */{
test: /.js$/,
ausschließen: /(node_modules)/,
verwenden: {loader: 'babel-loader',optionen: { voreinstellungen: ['@babel/preset-env']}
}} Dieses Mal wagen wir uns an die Datei webpack.prod.js . Wenn wir npm run build , werden unsere Ausgabe-Js minimiert und verfügen über vollständige Quellzuordnungen. Wenn wir im Dev-Modus über npm start laufen, haben wir immer noch leichtere Quellkarten, aber die JS werden nicht minimiert.
/* webpack.prod.js */const TerserPlugin = require("terser-webpack-plugin");module.exports = merge(common, {
Modus: „Produktion“,
devtool: „source-map“,
Optimierung: {minimizer: [ new TerserPlugin({test: /.js(?.*)?$/i,parallel: true,sourceMap: true, }),],
},});Weitere Informationen zu den Optionen finden Sie in der Terser-Dokumentation.
Hier möchten wir einen Ort haben, an dem wir bestimmten Tools mitteilen können, für welche Browser wir Unterstützung hinzufügen möchten. Dies erreichen wir mithilfe von browserslist und der entsprechenden .browserslistrc Datei im Projektstammverzeichnis. Autoprefixer und babel-present-env übernehmen diese Datei und wenden basierend auf der Konfiguration das an, was sie benötigt.
Informieren Sie sich darüber, was Sie sonst noch an .browserslistrc übergeben können, und verwenden Sie browserl.ist, um zu sehen, auf welche Browser Ihre Konfiguration speziell abzielt. Okay, ich glaube, ich habe jetzt schon oft genug von Browsern gesprochen?
/* .browserslistrc */> 0,25 %nicht tot
Zuerst testen wir mit Regex (regulärer Ausdruck) auf JPEG, JPG, PNG, GIF und SVG, dann verwenden wir den File-Loader, der Importe und Anforderungen einer Datei in eine URL auflöst und die Datei dann in das Ausgabeverzeichnis ausgibt. Wenn Sie also ein <img> -Element verwenden, das eine Datei aus dem Ordner src/images abruft, wird diese importiert und an den angegebenen Ausgabepfad images ausgegeben. Was am Ende src/images ist, wenn Sie npm start (dev ausführen) oder npm run build (build ausführen).
/* webpack.common.js */{
test: /.(jpe?g|png|gif|svg)$/,
use: [{loader: 'file-loader',options: { name: '[name].[ext]', outputPath: 'images/', publicPath: 'images/'},
}]}, Jetzt wollen wir unsere Bilder nur noch auf npm run build optimieren, also bearbeiten wir unsere webpack.prod.js wie folgt.
Auch hier testen wir mithilfe von Regex die Formate JPEG, JPG, PNG, GIF und SVG und wenden die entsprechenden Optimierungen an. gifsicle ist ein verlustfreier GIF-Kompressor, pngquant ist ein verlustbehafteter PNG-Kompressor und wir können ein zusätzliches Plugin namens imageminMozjpeg hinzufügen, um eine verlustbehaftete JPG/JPEG-Komprimierung durchzuführen. Eine sichere Wahl ist die Einstellung der Qualität zwischen 75 und 90. Sie sollten dann eine ordentliche Komprimierung ohne Einbußen bei der sichtbaren Qualität erzielen.
Ich empfehle, bei der verlustfreien Komprimierung zu bleiben und Ihre Bilder auf die richtige Größe zuzuschneiden, bevor Sie sie Ihrem Projekt hinzufügen. Entfernen Sie dazu einfach die Schlüsselabschnitte imageminMozjpeg und pngquant.
Sie können tinypng auch zur Bildkomprimierung verwenden.
/* webpack.prod.js */const ImageminPlugin = require("imagemin-webpack-plugin").default;const imageminMozjpeg = require("imagemin-mozjpeg");plugins: [
new ImageminPlugin({test: /.(jpe?g|png|gif|svg)$/i,gifsicle: { // verlustfreier GIF-Kompressor, OptimizationLevel: 9,},pngquant: { // verlustbehafteter PNG-Kompressor, für verlustfreie Standardeinstellung entfernen Qualität: "75",},plugins: [ imageminMozjpeg({// verlustbehafteter JPG-Kompressor, für standardmäßige verlustfreie Qualität entfernen: "75", }),],
}),];Hier testen wir alle gängigen Schriftartenerweiterungen und verwenden erneut den Dateilader, um unsere Schriftartenimporte aufzulösen und auszugeben.
/* webpack.common.js */{
test: /.(woff|woff2|ttf|otf)$/,
use: [{loader: 'file-loader',options: { name: '[name].[ext]', outputPath: 'fonts/', publicPath: 'fonts/'},
}]}, In unserer src/styles/base/_typography.scss laden wir die Schriftarten über die @font-face Regel. Google Webfonts Helper ist auch ein fantastisches Tool zum problemlosen Selbsthosten von Google Fonts. Lesen Sie mehr über die @font-face Regel bei CSS-Tricks. Informieren Sie sich außerdem über die Eigenschaft „font-display“.
Es empfiehlt sich immer, Ihre Schriftarten vorab zu laden. Das erreichen wir mit dem Preload-Webpack-Plugin, und Sie müssen es direkt nach dem HtmlWebpackPlugin einfügen, damit es richtig funktioniert.
/* webpack.common.js */new PreloadWebpackPlugin({
rel: 'vorladen',
as(entry) {if (/.(woff|woff2|ttf|otf)$/.test(entry)) return 'font';
},
fileWhitelist: [/.(woff|woff2|ttf|otf)$/],
include: 'allAssets'}), Hier sind wir wieder in der webpack.prod.js -Konfiguration und verwenden das compress-webpack-plugin, um nur die HTML-, CSS- und Javascript-Dateien zu komprimieren. Dadurch soll eine Komprimierung der generierten Sourcemap-Dateien vermieden werden.
/* webpack.prod.js */module.exports = merge(common, {
Modus: 'Produktion',
Plugins: [new CompressionPlugin({ test: /.(html|css|js)(?.*)?$/i // nur komprimiertes HTML/css/js, überspringt das Komprimieren von Quellkarten usw.}),}); Clean-webpack-plugin ist nur ein einfaches Webpack-Plugin, mit dem Sie Ihre Build-Ordner entfernen/bereinigen können, bevor Sie einen neuen erstellen. Beobachten Sie die Überprüfung Ihrer Ordner, während Sie npm run build oder npm start ausführen. Ihr aktueller dist -Ordner (falls Sie zuvor einen erstellt hatten) wird gelöscht und unmittelbar danach wird ein neuer angezeigt.
/* webpack.common.js */const CleanWebpackPlugin = require("clean-webpack-plugin");plugins: [new CleanWebpackPlugin(["dist"])];Die Verwendung von Sourcemaps ist für das Debuggen Ihres Codes in den Entwicklungstools unerlässlich.
Wie Sie sehen können, wenn Sie npm start und devtools in Chrome öffnen und dann auf die Konsole klicken, werden Sie sehen, dass zwei console.logs aus den Zeilen 1 und 2 von script.js stammen. Wir können dies leicht in unserer Ordnerstruktur unter erkennen src/scripts/script.js . Wenn wir keine Sourcemaps verwenden würden, würden uns die devtools anzeigen, dass diese console.logs von unserem gebündelten webpack-bundle.js stammen, was nicht sehr hilfreich ist.
Ähnlicher Fall bei unseren Modellen. Wenn Sie sich das body Element in Devtools ansehen, werden Sie sehen, dass einige Stile aus unserer Datei _global.scss und einige aus unserer Datei _typography.scss angewendet werden, die sich beide in unserem Ordner src/styles/base/ befinden. Wir könnten das nicht wissen, wenn wir Quellkarten weglassen würden. Es würde uns nur zeigen, dass die Stile aus unserem Paket webpack-bundle.css stammen.
/* webpack.dev.js */module.exports = merge(common, {
Modus: „Entwicklung“,
devtool: "inline-source-map",}); /* webpack.prod.js */module.exports = merge(common, {
Modus: „Produktion“,
devtool: "source-map",});Lesen Sie mehr über die verschiedenen Arten von Quellkarten, um herauszufinden, was für Ihr Projekt am besten geeignet ist. Informieren Sie sich außerdem über die Devtool-Option in den Webpack-Dokumenten.
Dies ist ein großartiges Plugin, das jedes einzelne Symbol, das Sie jemals benötigen werden, basierend auf einer Bildquelle generiert. In meinem Ordner src/images/ habe ich eine tris-package.svg , die ich in das Favicons-Webpack-Plugin eingebe.
Es werden Symbole für Apple, Android, Chrome, Firefox, Twitter, Windows usw. generiert. Es generiert jedes Symbol in allen verschiedenen Größen und importiert sie direkt in den Header Ihrer Website, wo sie hingehören. Twitter und Windows sind standardmäßig auf „false“ eingestellt, daher habe ich sie in „true“ geändert, um für alle Fälle alle Grundlagen abzudecken.
Hinweis: Dadurch verlängert sich die Bauzeit erheblich. Das ist verständlich, wenn man bedenkt, wie viel es unter der Haube leistet und wie viel Zeit es Ihnen auf lange Sicht spart. Seien Sie nicht überrascht, wenn Ihr npm run build 20 Sekunden länger als gewöhnlich dauert.
/* webpack.prod.js */const FaviconsWebpackPlugin = require("favicons-webpack-plugin");module.exports = merge(common, {
Modus: „Produktion“,
Plugins: [neues FaviconsWebpackPlugin({ logo: "./src/images/favicon.svg", Icons: {twitter: true,windows: true, },}),
],});Hier verwenden wir das Offline-Plugin-Plugin, um alle unsere Assets beim Laden der Seite zwischenzuspeichern.
Dieses Plugin soll ein Offline-Erlebnis für Webpack -Projekte bieten. Es verwendet ServiceWorker und AppCache als Fallback unter der Haube. Wir fügen einfach dieses Plugin in unser webpack.prod.js und die zugehörige Laufzeit in unser Client-Skript (src/index.js) ein, und unser Projekt wird offline-fähig, indem alle (oder einige) der Webpack-Ausgaberessourcen zwischengespeichert werden.
Hinweis: Wenn Sie npm run build und Ihre Änderungen auf Ihren Server hochladen (oder wie auch immer Sie Ihre Website auf dem neuesten Stand halten), muss Ihre Website geschlossen und erneut geöffnet werden, bevor Sie die Änderungen sehen. Sie können es nicht öffnen und weiter aktualisieren, Sie müssen die Registerkarte schließen und erneut öffnen, damit der Cache platzt.
/* webpack.prod.js */const OfflinePlugin = require("offline-plugin");module.exports = merge(common, {
Modus: „Produktion“,
Plugins: [new OfflinePlugin()],});Progressive Webanwendungen (PWAs) sind Webanwendungen, die wie normale Webseiten oder Websites geladen werden, dem Benutzer jedoch Funktionen wie Offline-Arbeiten, Push-Benachrichtigungen und Zugriff auf die Gerätehardware bieten können, die traditionell nur nativen Anwendungen zur Verfügung standen. PWAs kombinieren die Flexibilität des Webs mit dem Erlebnis einer nativen Anwendung.
Der letzte Schritt, um aus diesem Boilerplate eine PWA zu machen, besteht darin, das obligatorische Web-App-Manifest zum Stammverzeichnis Ihres Projekts hinzuzufügen und es entsprechend zu konfigurieren!
Beim Versuch, große Bibliotheken wie jQuery zu bündeln, stößt Webpack auf Probleme. Am Ende erhalten Sie Konsolenfehler wie $ is not defined oder jQuery is not defined . Um dieses Problem zu lösen, lassen wir es von Webpack als extern behandeln. Anschließend definieren wir die Variablen und binden jQuery über ein CDN ein. Die meisten Leute haben jedoch jQuery in ihrem Browser zwischengespeichert, sodass dies hinsichtlich der Leistung kein Problem darstellt. Ich habe die externals: config standardmäßig hinzugefügt, aber Sie müssen die jQuery-CDN selbst hinzufügen, wenn Sie sie verwenden möchten.
Weitere Informationen zu Externals finden Sie in der Webpack-Dokumentation.
/* webpack.common.js */plugins: [],externals: {
$: 'jquery',
jquery: 'jQuery',
'window.$': 'jquery',}/* src/index.html */<head> <scriptdefersrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script></head>
Ich versuche mein Bestes, die Dinge gründlich zu erklären, aber wenn etwas klarer erklärt werden kann, können Sie gerne eine Pull-Anfrage mit einigen Änderungsvorschlägen senden. Danke schön!
Hoffe das hat geholfen! Folgen Sie mir auf Twitter, wenn Sie sich dafür interessieren. ?
