Home >Web Front-end >JS Tutorial >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!