Explication détaillée de l'empaquetage et de l'utilisation de plusieurs modules vue-cli

Cette fois, je vous apporte une explication détaillée de l'utilisation du packaging multi-module vue-cli. Quelles sont les précautions pour le packaging multi-module vue-cli Voici des cas pratiques, prenons un. regarder.

Scénario

Dans le développement réel du projet, un tel scénario se produira. Le projet nécessite que plusieurs modules (une seule page ou une application multipage) soient utilisés ensemble. vue-cli ne fournit par défaut qu'un packaging à entrée unique, j'ai donc pensé à étendre vue-cli

pour implémenter

Tout d'abord, vous devez savoir que webpack fournit packaging multi-entrées, alors vous pouvez commencer la transformation à partir d'ici

New build/entry.js

const path = require('path')
const fs = require('fs')
const moduleDir = path.resolve(dirname, '../src/modules')
let entryObj = {}
let moduleItems = fs.readdirSync(moduleDir)
moduleItems.forEach(item => {
 entryObj[`${item}`] = `./src/modules/${item}/main.js`
})
module.exports = entryObj

Les modules fs et path de nodejs sont utilisés ici, qui peuvent être modifiés en fonction à votre propre configuration de projet, voici Utiliser le répertoire sous le dossier src/modules/ comme module Chaque module a un main.js comme fichier d'entrée

Modifier l'entrée dans la construction. /webpack.base.conf.js

const entryObj = require('./entry')
module.exports = {
 entry: entryObj
}

L'étape suivante consiste à savoir comment injecter les fichiers packagés en HTML. Ici, nous utilisons le plug-in html-webpack-plugin pour résoudre ce problème. besoin d'avoir un fichier de modèle HTML, puis de le configurer dans webpack. Modifier la configuration par défaut du plug-in html-webpack-plugin

Ajouter build/plugins.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
let configPlugins = []
Object.keys(entryObj).forEach(item => {
 configPlugins.push(new HtmlWebpackPlugin(
  {
   filename: '../dist/' + item + '.html',
   template: path.resolve(dirname, '../index.html'),
   chunks: [item]
  }
 ))
})
module.exports = configPlugins

Modifier build/ Configuration webpack.dev.conf.js

module.exports = {
  plugins: configPlugins
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes d'utilisation de bing Map

vérification de l'implémentation du nœud + jeton

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!