Implementierung einer Many-to-Many-Konfiguration im Webpack (Code im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Implementierung der Many-to-Many-Konfiguration im Webpack (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Webpack ist eine hervorragende Verpackungsplattform, die alle statischen Ressourcen wie Sass, Bilder, Schriftarten usw. in js packen kann

Der Autor hat kürzlich eine traditionelle statische Website umgestaltet. Um die HTTP-Anfrage zu reduzieren, besteht eine der Strategien darin, mehrere statische Ressourcen (z. B. Schriftarten, CSS, Bilder, JS), die einer einzelnen statischen Webseite entsprechen, in eine JS-Datei zu packen und dann jedes HTML mit dem entsprechenden unabhängigen JS zu verknüpfen Okay

Ich habe relevante Informationen zur Webpack-Konfiguration im Internet gefunden. Die entsprechenden Beziehungen zwischen HTML und JS sind „eins-zu-eins“ und „viele-zu-eins“, aber es gibt selten „viele-zu“. -many". Implementiert

Aber nach langem Herumwerfen habe ich es endlich konfiguriert. Hier werde ich die Syntax im Zusammenhang mit der Konfigurationsdatei teilen

//entry入口文件支持json的形式
    entry: {
            "static/pc/js/index": "./webStatic/pc/js/index.js",        
            "static/pc/js/article-details": "./webStatic/pc/js/article-details.js",        
            "static/mobile/js/index": "./webStatic/mobile/js/index.js",        
            "static/mobile/js/article-details": "./webStatic/mobile/js/article-details.js"
    },
    output: {
        path: path.resolve(__dirname, ''),        
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        filename: '[name].js'
    }

Konfigurationsanweisungen

Die webStatic im Stammverzeichnis ist der Quellcode. Der Platzierungsort, der Ort, an dem Static für js im Stammverzeichnis ausgegeben wird

Die Konfigurationsdatei verfügt über insgesamt vier Zuordnungen: webStatic/pc/js/index.js wird an static/pc/js/index.js, ./webStatic/pc/js/article-details.js ausgegeben und an static/pc/js/article-details.js, ./webStatic/mobile/js/index ausgegeben. js wird an static/mobile/js/index.js ausgegeben, ./webStatic/mobile/js/article-details.js wird an static/mobile/js/article-details.js

ausgegeben, um weitere Zuordnungen hinzuzufügen Fügen Sie sie später einfach entsprechend dem Format im Eintrag hinzu (rechts Kopieren Sie es einfach)

Zusammenfassung:

Um eine alte Website aufrechtzuerhalten, ist es nicht praktisch, alle Seiten mit React or neu zu schreiben vue-Komponenten in kurzer Zeit, aber die Verwendung von Webpack zum Packen ist immer noch möglich. Nachdem Sie Webpack mit mehreren Eingängen und mehreren Ausgängen konfiguriert haben, müssen Sie nur ein paar Änderungen an der Website vornehmen und können problemlos Websites mit scss schreiben , es6 und andere Syntaxen

Verwandte Empfehlungen:

Projektgerüst mit mehreren Einträgen, implementiert durch Webpack

Detaillierte Erläuterung von Webpack-Dateiseitenpaket mit mehreren Einträgen

Das obige ist der detaillierte Inhalt vonImplementierung einer Many-to-Many-Konfiguration im Webpack (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!