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


Posted in Javascript onApril 09, 2018

场景

在实际的项目开发中会出现这样的场景,项目中需要多个模块(单页或者多页应用)配合使用的情况,而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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
详谈javascript异步编程
Feb 21 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
理解Koa2中的async&await的用法
Feb 05 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
封装微信小程序http拦截器过程解析
Aug 13 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
webpack中的热刷新与热加载的区别
Apr 09 #Javascript
vue写一个组件
Apr 09 #Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 #Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 #Javascript
vue脚手架及vue-router基本使用
Apr 09 #Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 #Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 #Javascript
You might like
php笔记之:文章中图片处理的使用
2013/04/26 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
js资料toString 方法
2007/03/13 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
学前教育毕业生自荐信
2013/10/29 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
赡养老人协议书
2014/04/21 职场文书
食品安全承诺书
2014/05/22 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
紫日观后感
2015/06/05 职场文书
python flask框架快速入门
2021/05/14 Python