Comment utiliser l'empaquetage du module vue-cli

Cette fois, je vais vous montrer comment utiliser le module vue-cli pour le packaging, et quelles sont les précautions d'utilisation du module vue-cli pour le packaging. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 à savoir comment procéder. injectez les fichiers packagés en HTML, nous utilisons ici le plug-in html-webpack-plugin pour résoudre ce problème, vous devez d'abord disposer d'un fichier de modèle HTML, puis modifier la configuration par défaut du plug-in html-webpack-plugin dans le webpack configuration

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 la configuration build/webpack.dev.conf.js

module.exports = {
  plugins: configPlugins
}

Je crois que vous maîtrisez la méthode après en lisant 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 :

Ouvrez le composant d'opération de sélection de vue

Encapsulez le hook de navigation de routage Vue2 et utilisez-le dans le réel combat

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!