Heim > Web-Frontend > js-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-05-25 14:50:50
Original
1811 Leute haben es durchsucht

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
Nach dem Login kopieren

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
}
Nach dem Login kopieren

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
Nach dem Login kopieren

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

module.exports = {
  plugins: configPlugins
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage