So verpacken Sie bestimmte JS-Dateien separat im Webpack
Im Folgenden werde ich Ihnen eine Methode zum separaten Packen bestimmter JS-Dateien mit Webpack vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.
Hintergrund
Kürzlich eine Anfrage erhalten, da die Back-End-IP, auf die das generierte Front-End-Paket zugreift, nicht sicher ist, also ist es so erforderlich, um die IP im Projekt zu überprüfen. Die Konfigurationsdatei wird separat herausgenommen, um die IP-Änderung während des Betriebs und der Wartungsbereitstellung zu erleichtern. Daher müssen Sie Webpack verwenden, um die angegebenen Dateien separat zu packen.
CommonsChunkPlugin
module.exports = {
entry: {
app: APP_FILE // 入口文件
},
output: {
publicPath: './dist/', //输出目录，index.html寻找资源的地址
path: BUILD_PATH, // 打包目录
filename: '[name].[chunkhash].js', // 输出文件名
chunkFilename: '[name].[chunkhash].js' // commonChunk 输出文件
}
}Exkurs
{
Lassen Sie uns zuerst über publicPath sprechen. Hier ist ein Punkt zu beachten, nämlich, dass der Pfad als relativer Pfad ./dist geschrieben wird. Wenn Sie einen absoluten Pfad wie /dist/ schreiben, besteht ein Nachteil darin, dass index.html nicht auf die Ressource zugreifen kann, wenn Nginx das Front-End-Paket nicht im Stammverzeichnis ablegt. Daher wird empfohlen, einen relativen Pfad zu schreiben. Bei Verwendung eines relativen Pfads besteht jedoch ein potenzielles Problem, wenn der Routing-Zugriff auf das Projekt selbst im HTML5-Modus erfolgt und kein Hash verwendet wird (es gibt ein #-Zeichen). auf dem Routing), dann wird auf das Projekt trotzdem zugegriffen. Angular und React werden solche Probleme haben. Ich habe Vue noch nie verwendet, daher sollte es ähnlich sein. Die Lösung besteht derzeit darin, das Basis-Tag im Kopf von index.html hinzuzufügen, das heißt:
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <base href="/" rel="external nofollow" > </head>
}
Webpack selbst basiert auf Modularisierung, also In den meisten Fällen benötigen wir als Nächstes nur eine Eingabedatei, um dies zu erledigen. Für diese Anforderung muss zusätzlich zu diesem Eintrag eine Eintragsdatei zur App hinzugefügt werden. Das heißt:
entry: {
app: APP_FILE // 入口文件
ip: IP_FILE
},Nach der Konfiguration des Webpacks auf diese Weise druckt die dist-Datei app.xxx.js und ip.xxx.js erfolgreich, das gepackte Projekt meldet jedoch weiterhin einen Fehler. Die Lösung lautet: beibehalten Der IP-Eintrag der Datei bleibt unverändert, wird aber als commonChunk behandelt. Fügen Sie also den Plugins
new webpack.optimize.CommonsChunkPlugin({name: 'ip', minChunks: Infinity}),hinzu, um sicherzustellen, dass ip.xxx.js zuerst geladen wird, und um Fehler zu vermeiden.
Nachteile: Diese Verpackung hat einen offensichtlichen Nachteil: Die verpackten Dateien sind komprimiert, was es unpraktisch macht, die Dateien zweimal zu ändern. (Es wurde keine Lösung für die Komprimierung gefunden)
WebpackPlugin kopieren
Die endgültige Lösung besteht darin, die ip.js-Datei aus der Modularisierung des Projekts zu trennen und dann im Index zu speichern. html separat zitiert. (Dies war die Lösung, an die ich am Anfang gedacht habe, aber es war nicht die Lösung, die ich wollte, aber ich hatte keine andere Wahl, als über begrenzte Kenntnisse zu verfügen, und konnte das vorherige Problem nicht lösen.)
Lösungsprozess:
Führen Sie zunächst CopyWebpackPlugin in das Webpack ein und konfigurieren Sie den Code:
new CopyWebpackPlugin([
{from: './src/config/ip.js', to: 'ip.js'},
])Fügen Sie es separat im Index ein .html-Skript-Tag verwenden, stellen Sie sicher, dass Sie ein zufälliges Suffix konfigurieren, das heißt:
<script>
document.write("<s"+"cript type='text/javascript' src='./dist/ip.js?"+Math.random().toString(36).substr(2)+"'></scr"+"ipt>");
</script>, um zu verhindern, dass ip.js Probleme aufgrund des Cachings verursacht.
Das oben Gesagte löst das Problem der Webpack-Verpackung spezifizierter js separat.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Detaillierte Erläuterung des FastClick-Quellcodes (ausführliches Tutorial)
So implementieren Sie das Paging von Tabelleninhalten mithilfe von Vue und Element -ui
So verwenden Sie Vue, um Zeitstempel in benutzerdefinierte Zeitformate zu konvertieren
Das obige ist der detaillierte Inhalt vonSo verpacken Sie bestimmte JS-Dateien separat im Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
VUE3-Erste-Schritte-Tutorial: Paketieren und Erstellen mit Webpack
Jun 15, 2023 pm 06:17 PM
Vue ist ein hervorragendes JavaScript-Framework, das uns dabei helfen kann, schnell interaktive und effiziente Webanwendungen zu erstellen. Vue3 ist die neueste Version von Vue, die viele neue Features und Funktionen einführt. Webpack ist derzeit einer der beliebtesten JavaScript-Modulpaketierer und Build-Tools, der uns bei der Verwaltung verschiedener Ressourcen in unseren Projekten helfen kann. In diesem Artikel wird erläutert, wie Sie Webpack zum Verpacken und Erstellen von Vue3-Anwendungen verwenden. 1. Webpack installieren
Was ist der Unterschied zwischen Vite und Webpack?
Jan 11, 2023 pm 02:55 PM
Unterschiede: 1. Die Startgeschwindigkeit des Webpack-Servers ist langsamer als die von Vite. Da Vite beim Start nicht gepackt werden muss, müssen keine Modulabhängigkeiten analysiert und kompiliert werden, sodass die Startgeschwindigkeit sehr hoch ist. 2. Das Hot-Update von Vite ist in Bezug auf HRM schneller. Wenn sich der Inhalt eines bestimmten Moduls ändert, muss der Browser das Modul einfach erneut anfordern. 3. Vite verwendet esbuild, um Abhängigkeiten vorab zu erstellen, während Webpack auf Knoten basiert. 4. Die Ökologie von Vite ist nicht so gut wie die von Webpack und die Loader und Plug-Ins sind nicht umfangreich genug.
Verwendung von PHP und Webpack für die modulare Entwicklung
May 11, 2023 pm 03:52 PM
Mit der kontinuierlichen Weiterentwicklung der Webentwicklungstechnologie sind die Front-End- und Back-End-Trennung sowie die modulare Entwicklung zu einem weit verbreiteten Trend geworden. PHP ist eine häufig verwendete Back-End-Sprache. Bei der modularen Entwicklung müssen wir einige Tools verwenden, um Module zu verwalten und zu packen. In diesem Artikel wird die Verwendung von PHP und Webpack für die modulare Entwicklung vorgestellt. 1. Was ist modulare Entwicklung? Unter modularer Entwicklung versteht man die Zerlegung eines Programms in verschiedene unabhängige Module.
Wie konvertiert Webpack das ES6-Modul in das ES5-Modul?
Oct 18, 2022 pm 03:48 PM
Konfigurationsmethode: 1. Verwenden Sie die Importmethode, um den ES6-Code in die gepackte JS-Codedatei einzufügen. 2. Verwenden Sie das NPM-Tool, um das Babel-Loader-Tool zu installieren. Die Syntax lautet „npm install -D babel-loader @babel/core“. @babel/preset-env“; 3. Erstellen Sie die Konfigurationsdatei „.babelrc“ des Babel-Tools und legen Sie die Transkodierungsregeln fest; 4. Konfigurieren Sie die Verpackungsregeln in der Datei webpack.config.js.
Verwenden Sie Spring Boot und Webpack, um Front-End-Projekte und Plug-in-Systeme zu erstellen
Jun 22, 2023 am 09:13 AM
Da die Komplexität moderner Webanwendungen immer weiter zunimmt, wird die Entwicklung exzellenter Front-End-Engineering- und Plug-in-Systeme immer wichtiger. Mit der Popularität von Spring Boot und Webpack sind sie zu einer perfekten Kombination für die Erstellung von Front-End-Projekten und Plug-in-Systemen geworden. SpringBoot ist ein Java-Framework, das Java-Anwendungen mit minimalen Konfigurationsanforderungen erstellt. Es bietet viele nützliche Funktionen, wie z. B. die automatische Konfiguration, sodass Entwickler Webanwendungen schneller und einfacher erstellen und bereitstellen können. W
Was ist Webpack? Detaillierte Erklärung der Funktionsweise?
Oct 13, 2022 pm 07:36 PM
Webpack ist ein Modulpaketierungstool. Es erstellt Module für verschiedene Abhängigkeiten und packt sie alle in verwaltbare Ausgabedateien. Dies ist besonders nützlich für Single-Page-Anwendungen (der heutige De-facto-Standard für Webanwendungen).
Welche Dateien können Vue-Webpack-Pakete enthalten?
Dec 20, 2022 pm 07:44 PM
In Vue kann Webpack JS-, CSS-, Bilder-, JSON- und andere Dateien in geeignete Formate für die Browserverwendung packen; in Webpack können JS-, CSS-, Bilder-, JSON- und andere Dateitypen als Module verwendet werden. Verschiedene Modulressourcen im Webpack können gepackt und zu einem oder mehreren Paketen zusammengeführt werden. Während des Verpackungsprozesses können die Ressourcen verarbeitet werden, z. B. durch Komprimieren von Bildern, Konvertieren von SCSS in CSS, Konvertieren der ES6-Syntax in ES5 usw., was möglich ist Wird anhand des HTML-Dateityps erkannt.
So installieren Sie Webpack in Vue
Jul 25, 2022 pm 03:27 PM
Webpack in Vue wird mit dem Node-Paketmanager „npm“ oder dem npm-Image „cnpm“ installiert. Webpack ist ein statisches Modul-Paketierungstool für moderne JavaScript-Anwendungen. Es erfordert die Unterstützung von node.js. Es muss mit npm oder cnpm installiert werden. g“ oder „cnpm install webpack -g“.
