Analyse complète de l'utilisation de webpack pour construire une application multi-page

There are many articles about Webpack configuration and usage on the internet, most of which are about single-page applications. When we need to package multiple html files, things become麻烦起来. How to package multiple html files in webpack-dev-Use routes in server? How to package multiple html and js chunks and automatically update md5？This article is about how to solve these problems.

Here it is assumed that you have a basic understanding of Webpack

Requirements

Let's see our requirements:

Use webpack-dev-Server for development
In webpack-dev-Use routes in server, access/a is displayed with a.html,/b is displayed with b.html
Pack into multiple html files and add md to the resources referenced5Click

Main directory structure

├── src            
│  └── views         # Each folder corresponds to a page
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # Directory of packaged output
|  └── ...
└── template.html       # Ce template sera utilisé pour générer les html des différentes pages
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + express

Seulement les principaux dossiers sont répertoriés, ici nous générons plusieurs pages html à partir d'un template.html, qui ne diffèrent que par les chemins des ressources引用.

Configuration de webpack

Ici, nous résolvons principalement deux petits problèmes.

1. Pack plusieurs fichiers js de pages

Lire src/Les dossiers sous views, chaque dossier est conventionnellement considéré comme une page, et est打包成一个js chunk.

2. Pack plusieurs html

Génère plusieurs HtmlWebpackPlugin, chaque chunks de chaque plugin pointe vers le chunk js打包好的 au dessus.

// webpack.config.js
var glob = require('glob');
var webpackConfig = {
  /* Certaines configurations de base de webpack */  
};
// Obtenir les fichiers d'entrée à la racine du chemin spécifié
function getEntries(globPath) {
   var files = glob.sync(globPath),
    entries = {};
   files.forEach(function(chemin) {
     // Prendre le deuxième dernier niveau (le dossier sous view) comme nom de package
     var split = chemin.split('/');
     var name = split[split.length - 2];
     entries[name] = './' + chemin;
   });
   return entries;
}
var entries = getEntries('src/vue/**/index.js');
Object.keys(entries).forEach(function(name) {
  // Génère un entry pour chaque page, modifiez ici l'entry si vous avez besoin de HotUpdate
  webpackConfig.entry[name] = entries[name];
  // Génère un fichier html pour chaque page
  var plugin = new HtmlWebpackPlugin({
    // Le nom du fichier html généré
    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)
// route
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);
  // Utilisez le outputFileSystem fourni par webpack
  compiler.outputFileSystem.readFile(filepath, function(err, result) {
    if (err) {
      // une erreur
      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')
}

Enfin, définissez la commande de démarrage dans package.json :

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

Exécutez npm run dev, puis accédez à localhost: dans le navigateur8080/Sur chaque page, vous devriez voir le résultat que vous souhaitez obtenir.

C'est tout le contenu de cet article, j'espère qu'il vous aidera dans vos études, et j'espère que vous soutiendrez également le tutoriel criant.

Déclaration : le contenu de cet article est extrait du réseau, la propriété intellectuelle appartient à ses auteurs respectifs, le contenu est contribué et téléversé par les utilisateurs d'Internet, le site Web ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, le site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)

Tutoriel de base