vue-cli扩展多模块打包的示例代码

更新时间：2018年04月09日 14:22:15 作者：Gavin_lei

本篇文章主要介绍了vue-cli扩展多模块打包的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

场景

在实际的项目开发中会出现这样的场景，项目中需要多个模块（单页或者多页应用）配合使用的情况，而vue-cli默认只提供了单入口打包，所以就想到对vue-cli进行扩展

实现

首先得知道webpack是提供了多入口打包，那就可以从这里开始改造

新建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

这里用到了nodejs的fs和path模块，可以查看文档http://nodejs.cn/api/fs.html，http://nodejs.cn/api/path.html，可以根据自己的项目配置更改，此处是以src/modules/文件夹下的目录作为模块，每个模块中都有一个main.js作为入口文件

修改build/webpack.base.conf.js中entry

const entryObj = require('./entry')

module.exports = {

 entry: entryObj

}

接下来就是如何将打包好的文件注入到html中，这里利用html-webpack-plugin插件来解决这个问题，首先你需要有一个html的模板文件，然后在webpack配置中更改默认的html-webpack-plugin插件配置

添加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

修改build/webpack.dev.conf.js配置

module.exports = {
  plugins: configPlugins
}

实战

vue移动web通用脚手架

github地址: https://github.com/GavinZhuLei/vue-mobile

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Element UI Dialog对话框改成固定高度超出部分滚动条滚动
这篇文章主要给大家介绍了关于Element UI Dialog对话框改成固定高度超出部分滚动条滚动的相关资料,el-dialog默认高度是自由拉伸的,当内容超过屏幕时会出现滚动条,按钮和标题都会随着滚动,用户体验不好,需要的朋友可以参考下
2024-05-05
什么是Vue.js框架为什么选择它？(第一课)
Vue.js框架是什么，为什么要选择它？这篇文章为大家介绍目前前端技术使用的趋势，以及Vue.js的优点和适用场景等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
vue 子组件和父组件传值的示例
这篇文章主要介绍了vue 子组件和父组件传值的示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
2020-09-09
Vue监听键盘事件实用示例
我们在开发过程中经常需要监听用户的输入,比如用户的点击事件、拖拽事件、键盘事件等等,这篇文章主要给大家介绍了关于Vue监听键盘事件实用示例的相关资料,需要的朋友可以参考下
2023-11-11
Vue进阶之CodeMirror的应用小结
CodeMirror支持在线编辑代码，风格包括js, java, php, c++等等100多种语言，下面这篇文章主要来和大家讲讲CodeMirror的应用，感兴趣的可以了解一下
2023-06-06
Vue3+axios+Mock.js实现登录功能的示例代码
本文主要介绍了Vue3+axios+Mock.js实现登录功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
el-date-picker 选择日期范围只保存左侧日期面板的实现代码
接到这样的需求,日期筛选,但限制只能选择同一个月的数据,故此应该去掉右侧月份面板,今天通过本文给大家分享el-date-picker 选择日期范围只保存左侧日期面板的实现代码,感兴趣的朋友一起看看吧
2024-06-06
vue在.js文件中如何进行路由跳转
这篇文章主要介绍了vue在.js文件中如何进行路由跳转，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
Vue form表单动态添加组件实战案例
这篇文章主要介绍了Vue form表单动态添加组件实战案例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
使用vue制作探探滑动堆叠组件的实例代码
探探的堆叠滑动组件起到了关键的作用，下面就来看看如何用vue写一个探探的堆叠组件，感兴趣的朋友一起看看吧
2018-03-03

vue-cli扩展多模块打包的示例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具