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 = entryObjThe 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 = configPluginsModify 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
![WLAN expansion module has stopped [fix]](https://img.php.cn/upload/article/000/465/014/170832352052603.gif?x-oss-process=image/resize,m_fill,h_207,w_330)
WLAN expansion module has stopped [fix]
Feb 19, 2024 pm 02:18 PM
If there is a problem with the WLAN expansion module on your Windows computer, it may cause you to be disconnected from the Internet. This situation is often frustrating, but fortunately, this article provides some simple suggestions that can help you solve this problem and get your wireless connection working properly again. Fix WLAN Extensibility Module Has Stopped If the WLAN Extensibility Module has stopped working on your Windows computer, follow these suggestions to fix it: Run the Network and Internet Troubleshooter to disable and re-enable wireless network connections Restart the WLAN Autoconfiguration Service Modify Power Options Modify Advanced Power Settings Reinstall Network Adapter Driver Run Some Network Commands Now, let’s look at it in detail
WLAN extensibility module cannot start
Feb 19, 2024 pm 05:09 PM
This article details methods to resolve event ID10000, which indicates that the Wireless LAN expansion module cannot start. This error may appear in the event log of Windows 11/10 PC. The WLAN extensibility module is a component of Windows that allows independent hardware vendors (IHVs) and independent software vendors (ISVs) to provide users with customized wireless network features and functionality. It extends the capabilities of native Windows network components by adding Windows default functionality. The WLAN extensibility module is started as part of initialization when the operating system loads network components. If the Wireless LAN Expansion Module encounters a problem and cannot start, you may see an error message in the event viewer log.
From start to finish: How to use php extension cURL to make HTTP requests
Jul 29, 2023 pm 05:07 PM
From start to finish: How to use php extension cURL for HTTP requests Introduction: In web development, it is often necessary to communicate with third-party APIs or other remote servers. Using cURL to make HTTP requests is a common and powerful way. This article will introduce how to use PHP to extend cURL to perform HTTP requests, and provide some practical code examples. 1. Preparation First, make sure that php has the cURL extension installed. You can execute php-m|grepcurl on the command line to check
Extensions and third-party modules for PHP functions
Apr 13, 2024 pm 02:12 PM
To extend PHP function functionality, you can use extensions and third-party modules. Extensions provide additional functions and classes that can be installed and enabled through the pecl package manager. Third-party modules provide specific functionality and can be installed through the Composer package manager. Practical examples include using extensions to parse complex JSON data and using modules to validate data.
How to install mbstring extension under CENTOS7?
Jan 06, 2024 pm 09:59 PM
1.UncaughtError:Calltoundefinedfunctionmb_strlen(); When the above error occurs, it means that we have not installed the mbstring extension; 2. Enter the PHP installation directory cd/temp001/php-7.1.0/ext/mbstring 3. Start phpize(/usr/local/bin /phpize or /usr/local/php7-abel001/bin/phpize) command to install php extension 4../configure--with-php-config=/usr/local/php7-abel
How to use the Aurora Push extension to implement batch message push function in PHP applications
Jul 25, 2023 pm 08:07 PM
How to use the Aurora Push extension to implement batch message push function in PHP applications. In the development of mobile applications, message push is a very important function. Jiguang Push is a commonly used message push service that provides rich functions and interfaces. This article will introduce how to use the Aurora Push extension to implement batch message push functionality in PHP applications. Step 1: Register a Jiguang Push account and obtain an API key. First, we need to register on the Jiguang Push official website (https://www.jiguang.cn/push)
Detailed explanation of how Ansible works
Feb 18, 2024 pm 05:40 PM
The working principle of Ansible can be understood from the above figure: the management end supports three methods of local, ssh, and zeromq to connect to the managed end. The default is to use the ssh-based connection. This part corresponds to the connection module in the above architecture diagram; you can press the application type HostInventory (host list) classification is carried out in other ways. The management node implements corresponding operations through various modules. A single module and batch execution of a single command can be called ad-hoc; the management node can implement a collection of multiple tasks through playbooks. Implement a type of functions, such as installation and deployment of web services, batch backup of database servers, etc. We can simply understand playbooks as, the system passes
Ansible Ad-Hoc (peer-to-peer mode)
Feb 18, 2024 pm 04:48 PM
Official documentation: https://docs.ansible.com/ansible/latest/command_guide/intro_adhoc.html Introduction Ad-hoc command is a command that is temporarily entered and executed, usually used for testing and debugging. They do not need to be saved permanently. Simply put, ad-hoc is "instant command". Commonly used modules 1. command module (default module) The default module is not as powerful as the shell. Basically, the shell module can support the functions of the command module. 【1】Help ansible-doccommand# It is recommended to use the following ansible-doccomm
