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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 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
杏林同学录(三)
2006/10/09 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
Git命令之分支详解
2021/03/02 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
js实现图片轮播效果
2015/12/19 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
简单介绍Python中的几种数据类型
2016/01/02 Python
Python 文件处理注意事项总结
2017/04/10 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
python中退出多层循环的方法
2018/11/27 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
jupyter notebook清除输出方式
2020/04/10 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
夫妻房产协议书的格式
2014/10/11 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android