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
}

The next step is how to inject the packaged files into html. Here we use the html-webpack-plugin plug-in to solve this problem. First, you need to have an html template file, and then change the default in the webpack configuration. html-webpack-plugin plug-in configuration

Add build/plugins.js

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

Modify build/webpack.dev.conf.js configuration

module.exports = {
  plugins: configPlugins
}

I believe you have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps for using bing Map

##node token implementation verification

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!