How to use vue-cli module packaging

This time I will show you how to use the vue-cli module for packaging, and what are the precautions for using the vue-cli module for 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 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:

Open the vue select operation component

##Encapsulate the Vue2 routing navigation hook and use it in actual combat

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