Analyse des étapes pour créer des applications multipages avec webpack

Cette fois je vais vous apporter une analyse des étapes de construction d'une application multipage avec webpack Quelles sont les précautions pour construire une application multipage avec webpack. Voici des cas pratiques, voyons. jetez un oeil.

Il existe de nombreux articles sur Internet sur la configuration et l'utilisation de webpack, dont la plupart parlent d'applications d'une seule page. Lorsque nous devons empaqueter plusieurs HTML, les choses deviennent problématiques. Comment utiliser le routage dans webpack-dev-server ? Comment empaqueter plusieurs HTML et JS chunk et mettre à jour automatiquement md5 ? Cet article explique comment résoudre ces problèmes.

On suppose ici que vous avez déjà la compréhension la plus élémentaire de Webpack

Demande

Jetons un coup d'œil à nos besoins :

1. Utilisez webpack-dev-server comme serveur de développement

2. Utiliser le routage dans webpack-dev-server Lors de l'accès à /a, a.html sera affiché et /b affichera b.html

Emballez dans plusieurs HTML, ajoutez le tampon md5 aux ressources référencées

Principal

Structure du répertoire

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

Seuls les répertoires principaux sont répertoriés. Ici, nous générons du HTML pour plusieurs pages basées sur un template.html. Seuls les chemins de ressources référencés sont différents entre eux. Bien entendu, vous pouvez également utiliser un modèle HTML distinct pour chaque page.

Configuration du Webpack

Il y a deux problèmes principaux à résoudre ici.

1. Packager des fichiers js pour plusieurs pages

Lisez les répertoires sous src/views, acceptez que chaque répertoire soit traité comme une page et regroupé dans un bloc js.

2. Pack plusieurs HTML

Générez plusieurs plug-ins HtmlWebpackPlugin dans une boucle et pointez les morceaux de chaque plug-in vers le morceau js fourni ci-dessus.

// 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);
})

Configuration du routage

Dans une application multipage, nous souhaitons accéder à localhost:8080/a au lieu de localhost:8080/a.html.

Étant donné que webpack-dev-server ne regroupe que les fichiers en mémoire, vous ne pouvez pas directement sendfile('output/views/a.html') en express car le fichier n'existe pas encore. Heureusement, webpack fournit un outputFileStream pour sortir les fichiers dans sa mémoire. Nous pouvons l'utiliser pour le routage.

Notez que pour

définir le routage vous-même, vous devrez peut-être introduire une bibliothèque telle que express ou koa, puis traiter webpack-dev-server comme un 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);
  
  // 使用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')
})

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

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

Exécuter

, puis visitez localhost:8080/each page dans le navigateur, vous devriez pouvoir voir les résultats souhaités. npm run dev Je pense que vous maîtrisez la méthode de lecture de cet article. Pour plus de passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

ajax modifie directement l'état et supprime l'état de non-actualisation

Où se situe ce point lorsque vue utilise axios

Explication détaillée de l'utilisation de la bibliothèque d'exécution multithread de JS Nexus.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!