Detaillierte Erläuterung der Verpackung und Verwendung mehrerer Vue-Cli-Module

Dieses Mal erkläre ich Ihnen ausführlich die Verwendung der Vue-Cli-Multimodulverpackung. Was sind die Vorsichtsmaßnahmen für die Vue-CLI-Multimodulverpackung? sehen.

Szenario

In der tatsächlichen Projektentwicklung wird ein solches Szenario auftreten, das die gemeinsame Verwendung mehrerer Module (einzelne oder mehrseitige Anwendung) erfordert vue-cli bietet standardmäßig nur Single-Entry-Packaging, daher habe ich darüber nachgedacht, vue-cli

zu erweitern, um

zu implementieren. Zunächst müssen Sie wissen, dass Webpack Folgendes bietet Multi-Entry-Packaging, dann können Sie die Transformation von hier aus starten

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

Hier werden die fs- und path-Module von nodejs verwendet, die je nach Bedarf geändert werden können Eigene Projektkonfiguration. Hier ist src Das Verzeichnis unter dem Ordner /modules/ wird als Modul verwendet, und jedes Modul verfügt über eine main.js als

Eintragsdatei

Ändern Sie den Eintrag im Build /webpack.base.conf.js

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

Der nächste Schritt besteht darin, die gepackten Dateien in HTML einzufügen. Hier verwenden wir das HTML-Webpack-Plugin, um dieses Problem zu lösen Haben Sie eine HTML-Vorlagendatei und ändern Sie dann die Standardeinstellung in der Webpack-Konfiguration.

Build/plugins.js hinzufügen

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

Build/webpack.dev ändern .conf.js-Konfiguration

module.exports = {
  plugins: configPlugins
}

Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von Bing Map

Knoten+Token-Implementierungsüberprüfung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verpackung und Verwendung mehrerer Vue-Cli-Module. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!