Spiegazione dettagliata dell'uso di webpack per costruire applicazioni multipagina

Sul web ci sono molti articoli su configurazione e utilizzo di Webpack, la maggior parte dei quali riguarda applicazioni web singole. Quando dobbiamo pacchettizzare molti html, le cose diventano complicati. Come usare il route nel webpack-dev-server? Come pacchettizzare molti html e js chunk e aggiornare automaticamente il md5? Questo articolo spiega come risolvere questi problemi.

Supponiamo che tu abbia una conoscenza di base di Webpack

Esigenze

Ecco le nostre esigenze:

1. Usare il webpack-dev-server come server durante lo sviluppo
2. Usare il route nel webpack-dev-server, quando si accede a /a viene visualizzato a.html, quando si accede a /b viene visualizzato b.html
3. Pacchettizzare in molti html e aggiungere un marchio md5 alle risorse richiamate

Struttura principale dei directory

├── src            
│  └── views         # Ogni cartella corrisponde a una pagina
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # Directory di output del pacchetto
|  └── ...
└── template.html       # Sulla base di questo modello, verranno generati gli html di tutte le pagine
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + express    

Elenca solo le directory principali, qui generiamo più pagine html basate su un template.html, le quali differiscono solo nei percorsi delle risorse di riferimento. Certo, puoi anche utilizzare un modello html separato per ogni pagina.

Configurazione webpack

Qui si risolvono due problemi minori.

1. Pacchettizzazione di più file js delle pagine

Leggi la directory src/views, ogni directory viene considerata come una pagina, pacchettizzata in un chunk js.

2. Pacchettizzazione di più html

Generazione ciclica di più HtmlWebpackPlugin, con ogni plugin chunks puntati a chunk js sopra compressi.

// webpack.config.js
var glob = require('glob');
var webpackConfig = {
  /* Alcune configurazioni di base di webpack */  
};
// Ottiene i file di ingresso nella directory specificata
function getEntries(globPath) {
   var files = glob.sync(globPath),
    entries = {};
   files.forEach(function(filepath) {
     // Prende il secondo livello inferiore (la cartella sotto view) come nome del pacchetto
     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) {
  // Ogni pagina genera un entry, se necessario HotUpdate, modifica l'entry qui
  webpackConfig.entry[name] = entries[name];
  // Ogni pagina genera un html
  var plugin = new HtmlWebpackPlugin({
    // Il nome del file html generato
    filename: name + '.html',
    // Ogni modello html, qui più pagine utilizzano lo stesso modello
    template: './template.html',
    // Automaticamente inserisce i riferimenti nell'html
    inject: true,
    // Ogni modulo js citato in ogni html può anche includere moduli公用 come vendor
    chunks: [name]
  });
  webpackConfig.plugins.push(plugin);
}

Configurazione delle rotte

In applicazioni multipagina, desideriamo accedere a localhost:8080/a, non a localhost:8080/a.html.

Poiché webpack-dev-server impacchetta i file solo nella memoria, non puoi usare direttamente sendfile('output/views/a.html') in express, perché questo file non esiste ancora. Fortunatamente, webpack fornisce un outputFileStream per esportare i file dalla memoria, che possiamo utilizzare per le rotte.

Attenzione, per personalizzare le rotte, potresti dover importare librerie come express o koa e trattare webpack-dev-server come middleware.

// 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);
  // Use the outputFileSystem provided by webpack
  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')
}

Finally, define the start command in package.json:

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

Run npm run dev, then visit localhost:8080/ on the browser, you should see the result you want.

This is the full content of this article, I hope it will be helpful to everyone's learning, and I also hope everyone will support and cheer for the tutorial.

Declaration: The content of this article is from the network, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (replace # with @ when sending an email) for reporting and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.