Comment utiliser vue-cli pour étendre le packaging multi-modules

Cette fois, je vais vous montrer comment utiliser vue-cli pour étendre un emballage multi-module, et quelles sont les précautions pour utiliser vue-cli pour étendre un emballage multi-module. Ce qui suit est un exemple pratique. cas, jetons un coup d'oeil.

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 démarrer 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, vous pouvez consulter la documentation http://nodejs.cn/api/fs.html, http://nodejs.cn/api/path.html, peuvent être modifiés en fonction de la configuration de votre propre projet. Ici, le répertoire sous le dossier src/modules/ est. utilisé comme module. Chaque module a A main.js comme fichier d'entrée

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

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

L'étape suivante consiste à injecter les fichiers packagés en HTML. Nous utilisons ici le plug-in html-webpack-plugin pour résoudre ce problème. Tout d'abord, vous devez disposer d'un fichier modèle HTML, puis modifier le fichier html-webpack- par défaut. Configuration du plug-in dans la configuration du webpack

Ajouter un 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 la configuration build/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 choses plus excitantes, veuillez faire attention à php Autres articles connexes sur le site chinois !

Lecture recommandée :

Explication détaillée des étapes pour utiliser scss dans les projets angulaires

Comment gérer des fichiers volumineux emballé par webpack

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!