Analyse der Schritte zum Erstellen mehrseitiger Anwendungen mit Webpack

Dieses Mal werde ich die Schritte zum Erstellen einer mehrseitigen Anwendung mit Webpack analysieren. Was sind die Vorsichtsmaßnahmen für die Erstellung einer mehrseitigen Anwendung mit Webpack? Schauen Sie mal rein.

Es gibt viele Artikel im Internet über die Konfiguration und Verwendung von Webpack, in denen es meist um Single-Page-Anwendungen geht. Wenn wir mehrere HTML-Dateien verpacken müssen, wird es problematisch. Wie verwende ich Routing im Webpack-Dev-Server? So packen Sie mehrere HTML- und JS-Dateien chunk und MD5 automatisch aktualisieren? In diesem Artikel geht es darum, wie diese Probleme gelöst werden können.

Hier wird davon ausgegangen, dass Sie bereits über die grundlegendsten Kenntnisse von Webpack verfügen

Nachfrage

Werfen wir einen Blick auf unsere Bedürfnisse:

1. Verwenden Sie den Webpack-Dev-Server als Entwicklungsserver

2. Verwenden Sie das Routing im Webpack-Dev-Server. Beim Zugriff auf /a wird a.html und /b b.html angezeigt >

In mehrere HTML-Dateien packen, MD5-Stempel zu den referenzierten Ressourcen hinzufügen

Haupt

Verzeichnisstruktur

├── src            
│  └── views         # 每一个文件夹对应一个页面
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # 打包输出的目录
|  └── ...
└── template.html       # 将根据这个模版，生成各个页面的html
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + express

Hier werden nur die Hauptverzeichnisse für mehrere Seiten basierend auf einer template.html aufgeführt. Nur die referenzierten Ressourcenpfade unterscheiden sich. Selbstverständlich können Sie auch für jede Seite ein eigenes HTML-Template verwenden.

Webpack-Konfiguration

Hier gilt es zwei Hauptprobleme zu lösen.

1. JS-Dateien für mehrere Seiten packen

Lesen Sie die Verzeichnisse unter src/views, stimmen Sie zu, dass jedes Verzeichnis als Seite behandelt und in einen js-Block gepackt wird.

2. Packen Sie mehrere HTML-Dateien

Generieren Sie mehrere HtmlWebpackPlugin-Plug-Ins in einer Schleife und verweisen Sie die Blöcke jedes Plug-Ins auf den oben gepackten js-Block.

// webpack.config.js
var glob = require('glob');
var webpackConfig = {
  /* 一些webpack基础配置 */  
};
// 获取指定路径下的入口文件
function getEntries(globPath) {
   var files = glob.sync(globPath),
    entries = {};
   files.forEach(function(filepath) {
     // 取倒数第二层(view下面的文件夹)做包名
     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) {
  // 每个页面生成一个entry，如果需要HotUpdate，在这里修改entry
  webpackConfig.entry[name] = entries[name];
  
  // 每个页面生成一个html
  var plugin = new HtmlWebpackPlugin({
    // 生成出来的html文件名
    filename: name + '.html',
    // 每个html的模版，这里多个页面使用同一个模版
    template: './template.html',
    // 自动将引用插入html
    inject: true,
    // 每个html引用的js模块，也可以在这里加上vendor等公用模块
    chunks: [name]
  });
  webpackConfig.plugins.push(plugin);
})

Routing-Konfiguration

In einer mehrseitigen Anwendung möchten wir auf localhost:8080/a statt auf localhost:8080/a.html zugreifen.

Da webpack-dev-server nur Dateien im Speicher verpackt, können Sie file('output/views/a.html') nicht direkt in Express senden, da die Datei noch nicht tatsächlich existiert. Glücklicherweise bietet Webpack einen OutputFileStream zum Ausgeben von Dateien in seinem Speicher. Wir können ihn zum Routing verwenden.

Beachten Sie, dass Sie zum

Routing definieren selbst möglicherweise eine Bibliothek wie Express oder Koa einführen und dann webpack-dev-server als Middleware verarbeiten müssen.

// 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中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  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);
  
  // 使用webpack提供的outputFileSystem
  compiler.outputFileSystem.readFile(filepath, function(err, result) {
    if (err) {
      // something error
      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 abschließend den Startbefehl in package.json:

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

Führen Sie

aus und besuchen Sie dann die Seite „localhost:8080/each“ im Browser. Sie sollten die gewünschten Ergebnisse sehen können. npm run dev Ich glaube, dass Sie die Methode zum Lesen dieses Artikels beherrschen. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ajax ändert direkt den Status und löscht den nicht aktualisierten Status

Wohin führt dieser Punkt wann? vue verwendet Axios

Detaillierte Erläuterung der Verwendung der Multithread-Laufzeitbibliothek Nexus.js von JS

Das obige ist der detaillierte Inhalt vonAnalyse der Schritte zum Erstellen mehrseitiger Anwendungen mit Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!