Detailed explanation of vue-cli multi-module packaging and usage

This time I will bring you a detailed explanation of the use of vue-cli multi-module packaging. What are the precautions for vue-cli multi-module packaging? The following is a practical case, let's take a look.

Scenario

In actual project development, such a scenario will occur. The project requires multiple modules (single-page or multi-page applications) to be used together. And vue-cli only provides single-entry packaging by default, so I thought of extending vue-cli

implementation

First of all, you must know that webpack provides multi-entry packaging , then you can start the transformation from here

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

The fs and path modules of nodejs are used here, which can be changed according to your own project configuration. Here is src The directory under the /modules/ folder is used as a module, and each module has a main.js as the entry file

Modify the entry## in build/webpack.base.conf.js #

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

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

module.exports = {
  plugins: configPlugins
}

Detailed explanation of the steps for using bing Map

The above is the detailed content of Detailed explanation of vue-cli multi-module packaging and usage. For more information, please follow other related articles on the PHP Chinese website!