Heim >Web-Frontend >js-Tutorial >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!