Inhaltsverzeichnis
Style Loader
Man muss es anschreien
Bilder
Preloader
准备生产
摘要
Heim Web-Frontend js-Tutorial Vertiefen Sie Ihr Verständnis von Webpack: Teil 2

Vertiefen Sie Ihr Verständnis von Webpack: Teil 2

Sep 06, 2023 pm 04:17 PM

加深对 Webpack 的理解:第 2 部分

Im vorherigen Tutorial haben wir gelernt, wie man ein Webpack-Projekt einrichtet und wie man einen Loader für den Umgang mit JavaScript verwendet. Was Webpack jedoch wirklich glänzt, ist seine Fähigkeit, andere Arten statischer Ressourcen (wie CSS und Bilder) zu bündeln und sie nur bei Bedarf in unsere Projekte einzubinden. Beginnen wir damit, der Seite etwas Stil zu verleihen.

Style Loader

Erstellen Sie zunächst eine normale CSS-Datei im Styles-Verzeichnis. Rufen Sie main.css auf und fügen Sie eine Stilregel für das Titelelement hinzu.

h2 {
    background: blue;
    color: yellow;
}
Nach dem Login kopieren

Wie fügen wir dieses Stylesheet in unsere Seite ein? Nun, wie die meisten Dinge mit Webpack brauchen wir einen anderen Loader. Es gibt eigentlich zwei: CSS-Loader und Style-Loader. Der erste liest alle Stile aus unserer CSS-Datei, während der andere diese Stile in unsere HTML-Seite einfügt. Installieren Sie sie wie folgt:

npm install style-loader css-loader
Nach dem Login kopieren

Als nächstes erklären wir Webpack, wie man sie verwendet. In webpack.config.js müssen wir dem Loaders-Array ein weiteres Objekt hinzufügen. Darin werden wir einen Test hinzufügen, der nur CSS-Dateien abgleicht, und den zu verwendenden Loader angeben.

{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style!css'
}
Nach dem Login kopieren

Der interessante Teil dieses Codeausschnitts sind die 'style!css' 行。加载器是从右向左读取的,因此这告诉 Webpack 首先读取以 .css-Stile am Ende jeder Datei und das anschließende Einfügen dieser Stile in unsere Seite.

Da wir die Konfigurationsdateien aktualisiert haben, müssen wir den Entwicklungsserver neu starten, damit die Änderungen wirksam werden. Verwenden Sie ctrl+c 停止服务器并使用 webpack-dev-server, um den Server neu zu starten.

Jetzt müssen wir nur noch das Stylesheet aus der main.js-Datei holen. Wir machen dies auf die gleiche Weise wie jedes andere JavaScript-Modul:

const sayHello = require('./say-hello');

require('./styles/main.css');

sayHello('Guybrush', document.querySelector('h2'));
Nach dem Login kopieren

Beachten Sie, dass wir die Seite noch nicht einmal berührt index.html。打开浏览器即可看到样式为 h2 haben. Wenn Sie die Farbe der Kopfzeile im Stylesheet ändern, wird diese sofort und ohne Aktualisierung aktualisiert. Niedlich.

Man muss es anschreien

„Aber heutzutage benutzt niemand mehr CSS, Opa! Es dreht sich alles um Sass.“ Natürlich. Glücklicherweise verfügt Webpack über einen Loader, der genau das erledigt. Installieren Sie es zusammen mit der Node-Version von Sass mit dem folgenden Befehl:

npm install sass-loader node-sass
Nach dem Login kopieren

Dann aktualisieren webpack.config.js:

{
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: 'style!css!sass'
}
Nach dem Login kopieren

Was das jetzt bedeutet, ist, dass Sie für jede Datei, die mit .scss endet, Sass in reines CSS konvertieren, die Stile aus dem CSS lesen und dann die Stile in die Seite einfügen. Denken Sie daran, .scss 结尾的文件,将 Sass 转换为纯 CSS,从 CSS 中读取样式,然后将样式插入到页面中。请记住将 main.css 重命名为 main.scss in main.scss umzubenennen und die neu benannte Datei anzufordern. Zuerst etwas Sass:

$background: blue;

h2 {
    background: $background;
    color: yellow;
}
Nach dem Login kopieren

Dann main.js:

require('./styles/main.scss');
Nach dem Login kopieren

Super. So einfach ist das. Sie müssen keine Dateien konvertieren und speichern oder sich Ordner ansehen. Wir müssen nur den Sass-Stil direkt eingeben.

Bilder

„Ich wette, das Gleiche gilt natürlich auch für Bilder, Lader?“ Für Bilder verwenden wir den URL-Loader. Dieser Loader ruft die relative URL des Bildes ab und aktualisiert den Pfad, damit es korrekt in Ihr Paket aufgenommen wird. Wie immer:

npm install url-loader
Nach dem Login kopieren

Jetzt probieren wir etwas anderes in webpack.config.js aus. Fügen Sie auf die übliche Weise einen weiteren Eintrag zum Loaders-Array hinzu, aber dieses Mal möchten wir, dass der reguläre Ausdruck Bilder mit unterschiedlichen Dateierweiterungen abgleicht:

{
    test: /\.(jpg|png|gif)$/,
    include: /images/,
    loader: 'url'
}
Nach dem Login kopieren

Beachten Sie hier einen weiteren Unterschied. Wir verwenden kein exclude 键。相反,我们使用 include. Dies ist effizienter, da es Webpack anweist, alles zu ignorieren, was nicht mit einem Ordner namens „images“ übereinstimmt.

Normalerweise würden Sie eine Art Vorlagensystem verwenden, um HTML-Ansichten zu erstellen, aber wir werden es einfach halten und das Bild-Markup in JavaScript auf altmodische Weise erstellen. Erstellen Sie zunächst ein Bildelement, legen Sie das erforderliche Bild auf das src-Attribut fest und fügen Sie dann das Element zur Seite hinzu.

var imgElement = document.createElement('img');

imgElement.src = require('./images/my-image.jpg');

document.body.appendChild(imgElement);
Nach dem Login kopieren

Gehen Sie zurück zum Browser und Ihr Bild erscheint vor Ihnen!

Preloader

Eine weitere Aufgabe, die während der Entwicklung häufig ausgeführt wird, ist das Linting. Linting ist eine Methode, um potenzielle Fehler in Ihrem Code zu finden und zu überprüfen, ob Sie bestimmte Codierungskonventionen einhalten. Vielleicht möchten Sie danach suchen: „Habe ich eine Variable verwendet, ohne sie vorher zu deklarieren?“ oder „Habe ich das Semikolon am Ende der Zeile vergessen?“ Durch die Durchsetzung dieser Regeln können wir dumme Fehler frühzeitig ausmerzen.

JSHint 是一种流行的 linting 工具。这会检查我们的代码并突出显示我们所犯的潜在错误。 JSHint 可以在命令行手动运行,但这很快就会成为开发过程中的一件苦差事。理想情况下,我们希望它在每次保存文件时自动运行。我们的 Webpack 服务器已经在留意变化,所以是的,你猜对了——另一个加载器。

按照通常的方式安装jshint-loader:

 npm install jshint-loader
Nach dem Login kopieren

我们必须再次将其添加到我们的 webpack.config.js 中来告诉 Webpack 使用它。然而,这个加载器略有不同。它实际上并没有转换任何代码——只是看看。我们也不希望所有较重的代码修改加载器仅仅因为忘记了分号而运行并失败。这就是预加载器的用武之地。预加载器是我们指定在主要任务之前运行的任何加载器。它们以与加载器类似的方式添加到我们的 webpack.conf.js 中。

module: {
    preLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint'
        }
    ],
    loaders: [
       ...    
    ]
}
Nach dem Login kopieren

现在,如果检测到问题,我们的 linting 过程会立即运行并失败。在重新启动 Web 服务器之前,我们需要告诉 JSHint 我们正在使用 ES6,否则当它看到我们正在使用的 const 关键字时将会失败。

在配置中的模块键之后,添加另一个名为“jshint”的条目和一行来指定 JavaScript 的版本。

module: {
    preLoaders: [
        ...
    ],
    loaders: [
        ...    
    ]
},
jshint: {
    esversion: 6
}
Nach dem Login kopieren

保存文件并重新启动webpack-dev-server。运行还好吗?伟大的。这意味着您的代码不包含错误。让我们通过删除这一行中的分号来介绍一个:

var imgElement = document.createElement('img')
Nach dem Login kopieren

再次保存文件并查看终端。现在我们得到了这个:

WARNING in ./main.js
jshint results in errors
  Missing semicolon. @ line 7 char 47
Nach dem Login kopieren

谢谢,JSHint!

准备生产

现在我们很高兴我们的代码已经成型并且它完成了我们想要的一切,我们需要为现实世界做好准备。上线代码时最常见的事情之一就是缩小代码,将所有文件连接成一个,然后将其压缩到尽可能小的文件中。在继续之前,请查看您当前的 bundle.js。它可读,有大量空白,大小为 32kb。

“等等!别告诉我。另一个装载机,对吧?”没有!在这种罕见的情况下,我们不需要装载机。 Webpack 内置了缩小功能。一旦您对代码感到满意,只需运行以下命令:

webpack -p
Nach dem Login kopieren

-p 标志告诉 Webpack 让我们的代码为生产做好准备。当它生成捆绑包时,它会尽可能地进行优化。运行此命令后,打开 bundle.js,您会看到它全部被压缩在一起,即使使用如此少量的代码,我们也节省了 10kb。

摘要

我希望这个由两部分组成的教程能让您有足够的信心在自己的项目中使用 Webpack。请记住,如果您想在构建过程中执行某些操作,那么 Webpack 很可能有一个加载器。所有加载器都是通过 npm 安装的,因此请查看那里是否有人已经制作了您需要的内容。

玩得开心!

Das obige ist der detaillierte Inhalt vonVertiefen Sie Ihr Verständnis von Webpack: Teil 2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Apr 04, 2025 pm 02:42 PM

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Wer bekommt mehr Python oder JavaScript bezahlt? Wer bekommt mehr Python oder JavaScript bezahlt? Apr 04, 2025 am 12:09 AM

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt? Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt? Apr 04, 2025 pm 05:09 PM

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

Entmystifizieren JavaScript: Was es tut und warum es wichtig ist Entmystifizieren JavaScript: Was es tut und warum es wichtig ist Apr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe? Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe? Apr 04, 2025 pm 05:12 PM

Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...

TypeScript für Anfänger, Teil 2: Grundlegende Datentypen TypeScript für Anfänger, Teil 2: Grundlegende Datentypen Mar 19, 2025 am 09:10 AM

Sobald Sie das Typscript-Tutorial für Einstiegsklasse gemeistert haben, sollten Sie in der Lage sein, Ihren eigenen Code in eine IDE zu schreiben, die TypeScript unterstützt und in JavaScript zusammenfasst. Dieses Tutorial wird in verschiedenen Datentypen in TypeScript eingetaucht. JavaScript hat sieben Datentypen: NULL, UNDEFINED, BOOLEAN, NUMMER, STRING, SYMBOL (durch ES6 eingeführt) und Objekt. TypeScript definiert mehr Typen auf dieser Grundlage, und dieses Tutorial wird alle ausführlich behandelt. Null -Datentyp Wie JavaScript, null in TypeScript

Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen?
oder:
Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird? Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen? oder: Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird? Apr 04, 2025 pm 05:36 PM

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

Kann PowerPoint JavaScript ausführen? Kann PowerPoint JavaScript ausführen? Apr 01, 2025 pm 05:17 PM

JavaScript kann in PowerPoint ausgeführt werden und durch Aufrufen externer JavaScript -Dateien oder der Einbettung von HTML -Dateien über VBA implementiert werden. 1. Um VBA zu verwenden, um JavaScript -Dateien aufzurufen, müssen Sie Makros aktivieren und VBA -Programmierkenntnisse haben. 2. Einbetten Sie HTML -Dateien ein, die JavaScript enthalten, die einfach und einfach zu bedienen sind, aber Sicherheitsbeschränkungen unterliegen. Zu den Vorteilen zählen erweiterte Funktionen und Flexibilität, während Nachteile Sicherheit, Kompatibilität und Komplexität beinhalten. In der Praxis sollte die Aufmerksamkeit auf Sicherheit, Kompatibilität, Leistung und Benutzererfahrung geschenkt werden.

See all articles