Comment implémenter le développement multipage dans webpack

Cet article présente principalement la pratique du développement multipage de webpack. L'éditeur pense que c'est plutôt bien, je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Écrivez-le devant

Webpack est un chargeur de modules et un outil d'empaquetage qui peut charger du js, du css, des pages, des images, Diverses ressources telles que les vidéos sont modularisées. De nos jours, de nombreux modèles de webpacks d’une seule page circulent sur Internet, mais qu’en est-il de plusieurs pages ? Moins, je propose désormais un modèle front-end multipage. J'espère que tout le monde pourra l'utiliser.

Lorsque je suis entré en contact avec webpack pour la première fois, je pensais que webpack ne convenait qu'aux applications d'une seule page, telles que webpack+react, webpack+vue. Je ressens moi-même la puissance et la commodité de webpack dans le processus de création de projets et de développement à l'aide de webpack+vue. En fonction des besoins réels du projet, je me demande si des sites multipages peuvent également être créés à l'aide de webapck ? J'ai donc commencé quelques explorations et finalement construit une solution relativement complète.

Cet article prend comme exemple un projet réel pour décrire comment utiliser Webpack pour la construction technique dans des projets de plusieurs pages. Cet article est un résumé de ma propre expérience pratique, donc certaines solutions ne sont pas optimales et sont toujours en cours d'exploration et d'optimisation. S'il y a des erreurs ou des omissions, veuillez les signaler.

Introduction

Ce projet est principalement construit sur la base de webpack2.x, avec gulp comme outil auxiliaire. Le front-end utilise art-template comme moteur de modèle. Une page correspond à un fichier de modèle et d'autres modules peuvent être introduits dans le fichier d'entrée via l'importation ou Webpack fusionnera automatiquement ces modules en un seul fichier avec le. fichier d'entrée.

Configuration de l'environnement de développement front-end

Structure du répertoire principal

├─dist          #打包后生成的文件目录
└─src           #开发目录
  ├─components     #通用组件
  ├─static       #静态资源目录
  │ ├─css
  │ ├─img
  │ └─js
  │   ├─component  #站点通用组件对应的js
  │   ├─lib     #第三方js库
  │   ├─services   #各页面入口
  │   └─util     #通用工具js
  ├─template      #html模板
  └─views        #页面
   main.js       #公共入口
gulpfile.js        #gulp任务配置
package.json       #项目依赖
webpack.config.js     #webpack配置

Configuration du webpack

Fichier d'entrée

// 获取入口文件
var entries = (function() {
  var jsDir = path.resolve(__dirname, 'src/static/js/services');
  var entryFiles = glob.sync(jsDir + '/*.js');
  var map = {};

  entryFiles.forEach(function(filePath) {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    map[filename] = filePath;
  });
  return map;
})();

Cette méthode générera une carte du nom du fichier au chemin absolu du fichier, tel que

entry: {
  'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js'
}

Mise à jour à chaud

La mise à jour à chaud est tout simplement inutile. Elle est si facile à utiliser et améliore considérablement l'efficacité du développement.

//服务器配置
var devServer = env === 'production' ? {} : {
  contentBase: path.resolve(__dirname),
  compress: true,
  historyApiFallback: true,
  hot: true,
  inline: true,
  host: 'localhost', 
  port: 8080
};

De plus, ajoutez le nouveau webpack.HotModuleReplacementPlugin() au plugin et activez le remplacement du module à chaud pour obtenir des mises à jour à chaud.

Générer la configuration html

Il est convenu que le fichier js de la même page porte le même nom que le fichier modèle, et enfin un fichier html du même nom est généré sur la base du js.

var htmlPages = (function() {
  var artDir = path.resolve(__dirname, 'src/views');
  var artFiles = glob.sync(artDir + '/*.art');
  var array = [];
  artFiles.forEach(function(filePath) {
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    array.push(new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/template/index.html'),
      filename: filename + '.html',
      chunks: ['vendor', 'main', filename],
      chunksSortMode: function(chunk1, chunk2) {
        var order = ['vendor', 'main', filename];
        var order1 = order.indexOf(chunk1.names[0]);
        var order2 = order.indexOf(chunk2.names[0]);
        return order1 - order2;
      },
      minify: {
        removeComments: env === 'production' ? true : false,
        collapseWhitespace: env === 'production' ? true : false
      }
    }));
  });
  return array;
})();

Les modules communs sont extraits en composants

Pour certains modules qui doivent être utilisés dans plusieurs pages, ils peuvent être extraits en tant que composants communs. La composition du composant est la même que celle de la page, un fichier .js, un fichier .art et un fichier .css. Le contenu html est rendu dans le fichier js et enfin exporté. Vous pouvez l'exiger directement lors de son utilisation. . Pour des pratiques spécifiques, veuillez vous référer à la démo

Il y a des problèmes

1. Chaque fois qu'une nouvelle page est créée, le service webpack doit être redémarré

2. Les fichiers de polices ne peuvent pas être compressés. Il n'existe actuellement aucune bonne solution pour compresser les polices Web introduites via font-face

démo.

Une démo basée sur la théorie de cet article, adresse : webpack-multipage-demo

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde. l'avenir.

Articles connexes :

Comment implémenter le composant de zone de saisie numérique dans Vue

Comment utiliser jquery pour obtenir la gauche et la droite effet de mise à l'échelle de la barre latérale

Introduction détaillée à setTimeout dans la fonction JS

Introduction détaillée à la mise à jour des objets dans mangouste

Comment implémenter AOP en JavaScript

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!