使用Webpack构建SPA模式的多页面应用（基于Vue 2）

背景

Webpack构建后生成的包实在太大了，特别是大型项目，编译后得到一个庞然大物真是个恶梦。

那么问题来了，有解决办法吗？当然，我们可以指定一组文件（组件）生成到一个或者多个目录中去。

上代码。

指定组件目录

编辑webpack.base.conf.js文件，配置entry及output，代码如下：

module.exports = {entry: {'common': './src/components/Common.vue','user-info': './src/components/UserInfo.vue','order-info': './src/components/OrderInfo.vue'},output: {path: resolve('/static/'),filename: '[name].min.js',},
}

配置打包插件

编辑webpack.prod.conf.js文件，配置plugin，代码如下：

new HtmlWebpackPlugin({filename: 'order-info.html',template: 'order-info.html',chunks: ['common', 'order-info', ],
}),
new HtmlWebpackPlugin({filename: 'user-info.html',template: 'user-info.html',chunks: ['common', 'user-info', ],
})

执行构建

npm run build

这样，在dist目录里面就生成了两个文件。

使用Webpack构建SPA模式的多页面应用（基于Vue 2）相关推荐

vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示（图片可删除）
基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件: HTML文本内容: 相关照片 JS文本内容: /** * 从 file 域获取本地图片 url */ fun ...
gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
gulp + webpack 构建多页面前端项目 1
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
前端的单页面模式和多页面模式
一.前言前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互, 而项目内的页面交互,不可避免的需要相互之间的数据共享. 这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享 ...
使用webpack构建多页应用
背景随着react, vue, angular 三大前端框架在前端领域地位的稳固,SPA应用正在被应用到越来越多的项目之中.然而在某些特殊的应用场景之中,则需要使用到传统的多页应用.在使用webpa ...
Vue全家桶 + webpack 构建单页应用初体验
文章指南主题承接这上一篇Vue + Webpack 构建模块化开发框架详解,我们知道了如何使用webpack对vue进行打包,从而开始我们的前端模块化开发之路,这一篇在上一篇的基础上讲解 Vu ...
mysql的单页应用框架搭建_采用vue+webpack构建的单页应用——私人博客MintloG诞生记...
介绍项目地址:https://github.com/jrainlau/MintloG (特别乱,参考就好-_-|||) MintloG是我在五天之内完全由自己开发的私人博客,前端技术方案采用了vue ...
webpack构建工具快速上手指南
最近在研究react项目,接触到webpack打包工具.刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅. webpack是什么 webpack是近期最火的一款模块加载器 ...
Vue学习杂记（八）——SPA模式和前端路由
SPA模式和前端路由一.SPA模式介绍二.前端路由工作原理三.配置前端路由三.路由的其他使用方式四.动态路由与参数说明五.导航卫士一.SPA模式介绍 SPA(single pag ...

使用Webpack构建SPA模式的多页面应用（基于Vue 2）

背景

指定组件目录

配置打包插件

执行构建

使用Webpack构建SPA模式的多页面应用（基于Vue 2）相关推荐

最新文章

热门文章