WebPack配置vue多页面的技巧


Posted in Javascript onMay 15, 2018

WebPack虐我千百遍,我带她如初恋。一个项目前台页面写差不多了,webpack几乎零配置,也算work起来了。现在需要编写后台管理界面,另起一个单独的项目,那是不存在的。于是网上了搜了大把大把的文章,很多都是修改了项目的结构,讨厌,vue-cli搞的那一套,干嘛要修改来修改去的。像我这种前端小萌新,webpack的配置改着就把前台部分run不起来了。。。

于是就有了这个笔记:

先看看项目的结构:

├── build
├── config
├── src
│   ├── api
│   ├── assets
│   ├── components
│   ├── pages
│   ├── router
│   ├── utils
│   ├── vuex
│   ├── App.vue
│   ├── main.js
│   ├── admin.js
│   └── Admin.vue
├── static
│   └── images
├── README.md
├── admin.html
├── index.html
├── package.json
└── yarn.lock

我相信这样的结构大家一定很熟悉,除了 admin.html 和src文件夹下面的 Admin.vue 、 admin.js ,还有一些api,pages,vuex等文件夹,就是最常见的一个vue-cli初始化的项目结构。

我想要就是新增一个后台管理界面的入口admin.html,其他能够共用的还是共用,进入正题:

修改webpack的配置文件

修改 webpack.base.conf.js

打开 ~\build\webpack.base.conf.js ,找到entry,添加多入口:

entry: {
 app: './src/main.js',
 admin: './src/admin.js' //新增
},

这样运行编译的时候,每一个入口都会对应一个chunk。

run dev配置的修改

打开 ·~\build\webpack.dev.conf.js· ,在plugins下找到 HtmlWebpackPlugin ,在其后面添加对应的多页,并为每个页面添加Chunk配置如下:

new HtmlWebpackPlugin({
 filename: 'index.html', //生成的html
 template: 'index.html', //来源html
 inject: true, 
 chunks: ['app']//需要引入的Chunk,不配置就会引入所有页面的资源
}),
new HtmlWebpackPlugin({
 filename: 'admin.html',
 template: 'admin.html',
 inject: true,
 chunks: ['admin']
}),

run build配置的修改

修改config/index.js

打开 ~\config\index.js ,找到build下的 index: path.resolve(__dirname, '../dist/index.html') ,在其后添加多页:

admin: path.resolve(__dirname, '../dist/admin.html'),

修改 webpack.prod.conf.js

打开 ~\build\webpack.prod.conf.js ,在plugins下找到 HtmlWebpackPlugin ,在其后面添加对应的多页,并为每个页面添加Chunk配置:

new HtmlWebpackPlugin({
 filename: config.build.index,
 template: 'index.html',
 inject: true,
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 // more options:
 // https://github.com/kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
 filename: config.build.admin,
 template: 'admin.html',
 inject: true,
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'admin']
}),

End

恩,没有了,就不修改什么项目结构了,过程越复杂越容易出错。上面webpack的配置简单能看懂。

Javascript 相关文章推荐
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
深入理解js generator数据类型
Aug 16 Javascript
简单实现js倒计时功能
Feb 13 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
webpack4的迁移的使用方法
May 25 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
JS中数据结构之栈
Jan 01 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
修改npm全局安装模式的路径方法
May 15 #Javascript
修改node.js默认的npm安装目录实例
May 15 #Javascript
Vue中的scoped实现原理及穿透方法
May 15 #Javascript
vue-cli项目中使用Mockjs详解
May 14 #Javascript
vue使用自定义icon图标的方法
May 14 #Javascript
基于Vue2x的图片预览插件的示例代码
May 14 #Javascript
vue组件中的数据传递方法
May 14 #Javascript
You might like
php解压文件代码实现php在线解压
2014/02/13 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
js实现抽奖功能
2020/11/24 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python实现多线程采集的2个代码例子
2014/07/07 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
《红军不怕远征难》教学反思
2014/04/14 职场文书
家访教师心得体会
2016/01/23 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
golang语言指针操作
2022/04/14 Golang