So verwenden Sie vue-cli, um die Verpackung mehrerer Module zu erweitern

Dieses Mal zeige ich Ihnen, wie Sie Vue-Cli zum Erweitern von Multi-Modul-Paketen verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Vue-CLI zum Erweitern von Multi-Modul-Paketen gelten Fall, werfen wir einen Blick darauf.

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

Die fs- und path-Module von nodejs werden hier verwendet, Sie können das Dokument http: //nodejs.cn/api/ fs.html, http://nodejs.cn/api/path.html, kann entsprechend Ihrer eigenen Projektkonfiguration geändert werden. Hier wird das Verzeichnis unter dem Ordner src/modules/ verwendet Das Modul. Jedes Modul hat eine Haupt-.js als Eintragsdatei

Ändern Sie den Eintrag in build/webpack.base.conf.js

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

Der nächste Schritt ist, wie Um die gepackten Dateien in HTML einzufügen, verwenden wir das HTML-Webpack-Plugin, um dieses Problem zu lösen. Zuerst benötigen Sie eine HTML-Vorlagendatei und ändern dann die Standardkonfiguration des HTML-Webpack-Plugins 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.conf.js-Konfiguration ändern

module.exports = {
  plugins: configPlugins
}

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Der Fall in diesem Artikel finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von scss in Angular-Projekten

Wie man mit großen Dateien umgeht verpackt durch Webpack

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue-cli, um die Verpackung mehrerer Module zu erweitern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!