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精华代码集
Jan 24 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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写MySQL数据 实现代码
2009/06/15 PHP
php 无法载入mysql扩展
2010/03/12 PHP
php读取3389的脚本
2014/05/06 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
解释&&和||在javascript中的另类用法
2014/07/28 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
javascript生成大小写字母
2015/07/03 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
ES6 十大特性简介
2020/12/09 Javascript
Python遍历目录中的所有文件的方法
2016/07/08 Python
python使用mysql数据库示例代码
2017/05/21 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
日语专业个人的求职信
2013/12/03 职场文书
园林施工员岗位职责
2013/12/11 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
确保工程质量承诺书
2015/04/29 职场文书