How to use vue-cli to extend multi-module packaging

This time I will show you how to use vue-cli to expand multi-module packaging, and what are the precautions for using vue-cli to expand 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, you can view the document http://nodejs.cn/api/ fs.html, http://nodejs.cn/api/path.html, can be changed according to your own project configuration. Here, the directory under the src/modules/ folder is used as the module. 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 html-webpack-plugin plug-in configuration in the webpack 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 mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to use scss in Angular projects

How to deal with large files packaged by webpack

The above is the detailed content of How to use vue-cli to extend multi-module packaging. For more information, please follow other related articles on the PHP Chinese website!