So implementieren Sie die mehrseitige Entwicklung im Webpack

Dieser Artikel stellt hauptsächlich die Praxis der mehrseitigen Webpack-Entwicklung vor. Der Herausgeber ist der Meinung, dass er jetzt mit Ihnen geteilt wird und als Referenz dient. Folgen wir dem Editor und werfen wir einen Blick darauf.

Schreiben Sie es vorne

Webpack ist ein Modullader und Verpackungstool, das JS, CSS, Seiten, Bilder usw. laden kann. Verschiedene Ressourcen wie beispielsweise Videos sind modularisiert. Heutzutage kursieren im Internet viele Single-Page-Webpack-Modelle, aber was ist mit mehreren Seiten? Weniger, da ich jetzt ein mehrseitiges Frontend-Modell anbiete. Ich hoffe, jeder kann es nutzen.

Als ich zum ersten Mal mit Webpack in Kontakt kam, dachte ich, Webpack sei nur für Einzelseitenanwendungen geeignet, wie Webpack+React, Webpack+Vue. Ich selbst spüre die Leistungsfähigkeit und den Komfort von Webpack beim Erstellen von Projekten und bei der Entwicklung mit webpack+vue. Aufgrund der tatsächlichen Projektanforderungen frage ich mich, ob mit Webapck auch mehrseitige Websites erstellt werden können? Also begann ich mit der Erkundung und baute schließlich eine relativ vollständige Lösung auf.

In diesem Artikel wird anhand eines tatsächlichen Projekts beschrieben, wie Webpack für den technischen Aufbau in mehrseitigen Projekten verwendet wird. Dieser Artikel ist eine Zusammenfassung meiner eigenen praktischen Erfahrungen, daher sind einige Lösungen nicht optimal und werden noch untersucht und optimiert. Wenn es Fehler oder Auslassungen gibt, weisen Sie bitte darauf hin.

Einführung

Dieses Projekt basiert hauptsächlich auf webpack2.x, mit gulp als Hilfswerkzeug. Das Frontend verwendet art-template als Vorlagen-Engine. Eine Seite entspricht einer Vorlagendatei und einer Eintragsdatei. Andere Module können durch Importieren in die Eintragsdatei eingefügt werden Eintragsdatei.

Einrichtung der Front-End-Entwicklungsumgebung

Hauptverzeichnisstruktur

├─dist          #打包后生成的文件目录
└─src           #开发目录
  ├─components     #通用组件
  ├─static       #静态资源目录
  │ ├─css
  │ ├─img
  │ └─js
  │   ├─component  #站点通用组件对应的js
  │   ├─lib     #第三方js库
  │   ├─services   #各页面入口
  │   └─util     #通用工具js
  ├─template      #html模板
  └─views        #页面
   main.js       #公共入口
gulpfile.js        #gulp任务配置
package.json       #项目依赖
webpack.config.js     #webpack配置

Webpack-Konfiguration

Eintragsdatei

// 获取入口文件
var entries = (function() {
  var jsDir = path.resolve(__dirname, 'src/static/js/services');
  var entryFiles = glob.sync(jsDir + '/*.js');
  var map = {};

  entryFiles.forEach(function(filePath) {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    map[filename] = filePath;
  });
  return map;
})();

Diese Methode generiert eine Zuordnung vom Dateinamen zum absoluten Pfad der Datei, z. B.

entry: {
  'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js'
}

Hot Update

Hot Update ist einfach nicht einfach zu bedienen, was die Entwicklungseffizienz erheblich verbessert.

//服务器配置
var devServer = env === 'production' ? {} : {
  contentBase: path.resolve(__dirname),
  compress: true,
  historyApiFallback: true,
  hot: true,
  inline: true,
  host: 'localhost', 
  port: 8080
};

Fügen Sie außerdem das neue webpack.HotModuleReplacementPlugin() zum Plugin hinzu und aktivieren Sie Hot Module Replacements, um Hot-Updates zu erhalten.

HTML-Konfiguration generieren

Es wird vereinbart, dass die JS-Datei auf derselben Seite denselben Namen wie die Vorlagendatei hat und schließlich eine HTML-Datei mit demselben Namen wird basierend auf dem js generiert.

var htmlPages = (function() {
  var artDir = path.resolve(__dirname, 'src/views');
  var artFiles = glob.sync(artDir + '/*.art');
  var array = [];
  artFiles.forEach(function(filePath) {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    array.push(new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/template/index.html'),
      filename: filename + '.html',
      chunks: ['vendor', 'main', filename],
      chunksSortMode: function(chunk1, chunk2) {
        var order = ['vendor', 'main', filename];
        var order1 = order.indexOf(chunk1.names[0]);
        var order2 = order.indexOf(chunk2.names[0]);
        return order1 - order2;
      },
      minify: {
        removeComments: env === 'production' ? true : false,
        collapseWhitespace: env === 'production' ? true : false
      }
    }));
  });
  return array;
})();

Gemeinsame Module in Komponenten extrahieren

Einige Module, die auf mehreren Seiten verwendet werden müssen, können als gemeinsame Komponenten extrahiert werden. Die Zusammensetzung der Komponente ist die gleiche wie die der Seite, eine .js-Datei, eine .art-Datei und eine .css-Datei. Der HTML-Inhalt wird in der JS-Datei gerendert und schließlich exportiert . Spezifische Vorgehensweisen finden Sie in der Demo

Es gibt Probleme

1. Jedes Mal, wenn eine neue Seite erstellt wird, muss der Webpack-Dienst aktualisiert werden neu gestartet

2. Schriftdateien können nicht komprimiert werden. Derzeit gibt es keine gute Lösung zum Komprimieren von Web-Schriftarten, die über die Demo von „font-face“ eingeführt wurden

Eine Demo basierend auf der Theorie dieses Artikels, Adresse: webpack-multipage-demo

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein die Zukunft.

Verwandte Artikel:

So implementieren Sie die Zahleneingabefeldkomponente in Vue

So verwenden Sie JQuery, um links und rechts zu erreichen Seitenleisten-Skalierungseffekt

Detaillierte Einführung in setTimeout in der JS-Funktion

Detaillierte Einführung in die Aktualisierung von Objekten in Mungo

So implementieren Sie AOP in JavaScript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die mehrseitige Entwicklung im Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!