So verwenden Sie die Vue-Cli-Modulverpackung

Dieses Mal zeige ich Ihnen, wie Sie das Vue-Cli-Modul zum Verpacken verwenden und welche Vorsichtsmaßnahmen für die Verwendung des Vue-Cli-Moduls zum Verpacken gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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-Datei als Eintrag.

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

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

Der nächste Schritt besteht darin, die gepackten Dateien einzufügen in HTML. Hier verwenden wir das HTML-Webpack-Plugin-Plugin, um dieses Problem zu lösen. Zuerst benötigen Sie eine HTML-Vorlagendatei und ändern dann die Standardkonfiguration des HTML-Webpack-Plugin-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 gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Öffnen Sie die Vue-Auswahloperationskomponente

Kapseln Sie den Vue2-Routing-Navigations-Hook und verwenden Sie ihn tatsächlich Kampf

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Vue-Cli-Modulverpackung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!