Detaillierte Erklärung zur Verwendung von webpack zum Bau mehrseitiger Anwendungen

Über die Konfiguration und Verwendung von webpack gibt es viele Artikel im Internet, die hauptsächlich Single-Page-Anwendungen behandeln. Wenn wir mehrere html pakten müssen, wird das Ganze komplizierter. Wie packe ich mehrere html und js chunk in webpack-dev-Im server verwenden Sie Routen? Wie pakten Sie mehrere html und js chunk und aktualisieren Sie md automatisch5？Dieser Artikel behandelt, wie man diese Probleme löst.

Hier wird davon ausgegangen, dass Sie bereits eine grundlegende Kenntnis von Webpack haben

Anforderungen

Sehen wir uns unsere Anforderungen an:

1. Verwenden Sie webpack-dev-server ist der Server für die Entwicklung
2. In webpack-dev-Im server verwenden Sie Routen, um auf zuzugreifen/a wird a.html angezeigt,/b wird b.html angezeigt
3. Paketierte mehrere html, fügen Sie den referenzierten Ressourcen md hinzu5Klick

Hauptverzeichnisstruktur

├── src            
│  └── views         # Jeder Ordner entspricht einer Seite
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # Ausgabe-Verzeichnis
|  └── ...
└── template.html       # basierend auf diesem Muster, werden die html-Seiten für jede Seite generiert
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + express    

Nur die Hauptverzeichnisse aufgeführt, hier erstellen wir mehrere Seitenhtml basierend auf einem template.html, die nur unterschiedliche Ressourcenpfade enthalten. Natürlich können Sie auch jede Seite mit einem separaten html-Template verwenden.

Webpack-Konfiguration

Hier werden zwei kleine Probleme gelöst.

1mehrfache js-Dateien von mehreren Seiten packen

Lese von src/Verzeichnisse unter views, jede Directory als eine Seite betrachten, in einen js-chunk packen.

2mehrfache html-Pakete

Mehrere HtmlWebpackPlugin-Module generieren, um sicherzustellen, dass die chunks jeder Plugin auf die obigen gepackten js-chunks verweisen.

// webpack.config.js
var glob = require('glob');
var webpackConfig = {
  /* Einige grundlegende webpack-Konfigurationen */  
};
// Eingangsfelder unter dem angegebenen Pfad abrufen
function getEntries(globPath) {
   var files = glob.sync(globPath),
    entries = {};
   files.forEach(function(filepath) {
     // Nehmen Sie das zweite letzte Level (das Verzeichnis unter view) als Paketnamen
     var split = filepath.split('/');
     var name = split[split.length - 2];
     entries[name] = '.',/' + filepath;
   );
   return entries;

var entries = getEntries('src/view/**/index.js');
Object.keys(entries).forEach(function(name) {
  // Eine entry pro Seite generieren, falls HotUpdate erforderlich ist, hier die entry ändern
  webpackConfig.entry[name] = entries[name];
  // Eine html-Datei pro Seite generieren
  var plugin = new HtmlWebpackPlugin({
    // Generierte html-Dateiname
    filename: name + '.html',
    // 每个html的模版，这里多个页面使用同一个模版
    template: './template.html',
    // 自动将引用插入html
    inject: true,
    // 每个html引用的js模块，也可以在这里加上vendor等公用模块
    chunks: [name]
  );
  webpackConfig.plugins.push(plugin);
}

路由配置

在多页应用下，我们希望访问的是localhost:8080/a，而不是localhost:8080/a.html。

由于webpack-dev-server只是将文件打包在内存里，所以你没法在express里直接sendfile('output/views/a.html')，因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream，用来输出其内存里的文件，我们可以利用它来做路由。

注意，为了自定义路由，你可能需要引进express或koa之类的库，然后将webpack-dev-server作为中间件处理。

// dev-server.js
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var app = express();
// webpack编译器
var compiler = webpack(webpackConfig);
// webpack-dev-server中间件
-dev-middleware
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  
);
app.use(devMiddleware)
// 路由
app.get('/:viewname? function(req, res, next) {
  var viewname = req.params.viewname 
    ? req.params.viewname + '.html' 
    : 'index.html';
  var filepath = path.join(compiler.outputPath, viewname);
  // Verwenden Sie das von webpack bereitgestellte outputFileSystem
  compiler.outputFileSystem.readFile(filepath, function(err, result) {
    if (err) {
      // etwas fehler
      return next(err);
    
    res.set('content-type', 'text/html');
    res.send(result);
    res.end();
  );
);
module.exports = app.listen(8080, function(err) {
  if (err) {
    // do something
    return;
  
  console.log('Listening at http://localhost: + port + "\n')
}

Definieren Sie schließlich den Startbefehl in package.json:

// package.json
{
  scripts: {
    "dev": "node ./dev-server.js  
  

Führen Sie npm run dev aus und besuchen Sie dann localhost:8080/Auf jeder Seite sollten Sie das gewünschte Ergebnis sehen können.

Das ist der vollständige Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und wir bitten um Ihre Unterstützung und Unterstützung für die Anleitung.

Erklärung: Der Inhalt dieses Artikels stammt aus dem Internet und ist dem jeweiligen Urheber gehört. Der Inhalt wurde von Internetbenutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Haftung. Wenn Sie Inhalte mit fraglichem Copyright finden, senden Sie bitte eine E-Mail an: notice#oldtoolbag.com (bei der Abgabe von E-Mails, bitte # durch @ ersetzen) meldet, und bietet relevante Beweise an. Bei nachgewiesener Infringement wird die Website die betroffenen Inhalte sofort löschen.