Heim > Artikel > Web-Frontend > So verpacken Sie bestimmte JS-Dateien separat im Webpack

So verpacken Sie bestimmte JS-Dateien separat im Webpack

亚连Original: 2018-06-05 15:47:142916Durchsuche

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: &#39;./dist/&#39;, //输出目录，index.html寻找资源的地址
 path: BUILD_PATH, // 打包目录
 filename: &#39;[name].[chunkhash].js&#39;, // 输出文件名
 chunkFilename: &#39;[name].[chunkhash].js&#39; // 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: &#39;ip&#39;, 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: &#39;./src/config/ip.js&#39;, to: &#39;ip.js&#39;},
 ])

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=&#39;text/javascript&#39; src=&#39;./dist/ip.js?"+Math.random().toString(36).substr(2)+"&#39;></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!

Stellungnahme：

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

Vorheriger Artikel：So optimieren Sie Angular-CodeNächster Artikel：So optimieren Sie Angular-Code

In Verbindung stehende Artikel

Mehr sehen