正文
[转] vue&webpack多页面配置
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
前言
最近由于项目需求，选择使用vue框架，webpack打包直接使用的vue-cli，因为需要多页面而vue-cli只有单页面，所以就决定修改vue-cli的配置文件来满足开发需求。
html-webpack-plugin
实现需求需要用到这个插件， 具体信息请看这里
对于多页面入口我们需要在插件数组中多次声明该插件To generate more than one HTML file, declare the plugin more than once in your plugins array
对于正常的开发需求我们需要配置该插件的信息（这里只介绍一些基本的信息，读者可根据自身情况扩展）
title: 文件标题信息（对于多个文件使用同一个模板文件很有用，在模板文件的title中添加代码
<%= htmlWebpackPlugin.options.title %>）
template: 模板文件（模板html文件）
filename: 生成的html文件名
chunks: 允许插入的模块名（此处一般添加公共块，以及每个页面独立的块，请注意添加的顺序）
以上这些配置是我举例需要独立控制的配置信息，有关配置的其他信息这里不再多说。
我们需要单独创建一个配置文件来定义我们上边的自定义信息，这里呢在config文件下添加multiple.js文件
multiple.js
简单粗暴上段代码：
const path = require('path');module.exports = {
index: 'page1/index.html',
pages: [
{
page: 'page1',
entry: path.resolve(__dirname, '../src/page1/main.js'),
title: '这是页面1',
filename: path.resolve(__dirname, '../dist/page1/index.html'),
template: path.resolve(__dirname, '../index.html')
},
{
page: 'page2',
entry: path.resolve(__dirname, '../src/page2/main.js'),
title: '这是页面2',
filename: path.resolve(__dirname, '../dist/page2/index.html'),
template: path.resolve(__dirname, '../index.html')
},
***
}
其中index表示开发阶段devServer使用的首页，便于控制（也可以不设置直接在devServer里配置）
正文
哈哈哈，前边都是基础准备工作，
接下来开始正文，我们知道对于多页面配置首先要webpack的entry为多入口，所以在webpack的 base 配置中配置多入口，因为这个入口文件需要我们在multiple.js中控制，所以首先引入multiple.js，然后生成entry对象
/* webpack.base.conf.js */const multiple = require('../config/multiple') // 引入文件const entry = {};multiple.pages.forEach((value, index) => {
entry[value.page] = value.entry;
})// 在webpack配置中配置
const webpackConfig = {
***
entry: entry,
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
***
}multiple.pages.forEach((value, index) => {
webpackConfig.plugins.push(
new HtmlWebpackPlugin({
title: value.title || '这里是标题',
filename: value.filename,
template: value.template,
inject: true,
hash: true,
chunks: ['manifest', 'vendor', 'app', value.page],
minify: false,
chunksSortMode: 'dependency'
})
)
})***
注：在vue-cli配置中的webpack.prop.conf.js有配置HtmlWebpackPlugin，注意将其注释掉
在 webpack.dev.conf.js 中的devServer配置中可以自定义打开首页，这个可以根据需求配置此处不再赘余。
至此所有的配置已完成，可以修改 multiple.js 文件定制自己的多页面开发了
总结一下，我们需要修改的文件
webpack.base.conf.js 修改入口文件，根据我们的配置文件webpack.prop.conf.js 注释掉默认的HtmlWebpackPlugin配置webpack.dev.conf.js 根据需求定制入口页面multiple.js 定制我们自己的多页面信息
另：对于我们的 vendor 文件我们也需要做出相应的修改（主要是应对不同页面引用不同的公共文件，而造成页面加载不必要的文件）（需要的插件 webpack.optimize.CommonsChunkPlugin ），具体的配置修改，将在下次说明。手动[调皮]
原文地址
[转] vue&webpack多页面配置的更多相关文章- vue&webpack多页面配置
前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...
- vue webpack多页面构建
项目示例地址: https://github.com/ccyinghua/webpack-multipage 项目运行: 下载项目之后 # 下载依赖 npm install # 运行 npm run ...
- webpack多页面配置
const path = require('path'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const Html ...
- Vue+webpack配置实现多页面应用开发
为什么要配置多页面开发? · 由于单页面应用不利于SEO,对于某些资讯类网站不够友好,而多页面则能够更优的解决此问题. · 传统的多页面开发模式(如java的jsp等) 前后端耦合性大,开发效率低,代 ...
- 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- VUE 多页面配置(二)
1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求,此记录为统一配置出入口. 2. 实例 2.1 页面配置 使用vue脚手架搭建 ...
- VUE 多页面配置(一)
1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求. 2. 实例 2.1 页面配置 2.1.1 默认首页 使用vue脚手架搭建后 ...
- Vue + webpack 项目配置化、接口请求统一管理
准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题. 又或者后面其他同事接手你的模块,或者改你的bug ...
- 一字一句的搞懂vue-cli之vue webpack template配置
webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
随机推荐- HackerNews——《Pokemon Go玩家存在巨大的安全风险》
译者注:原文来自HackerNews,首发tumblr,标题为Pokemon Go is a huge security risk.作者Adam Reeve,附一张这个胖子的帅照 (正文)之所以会 ...
- UI设计中px、pt、ppi、dpi、dp、sp之间的关系
UI设计中px.pt.ppi.dpi.dp.sp之间的关系 武汉AAA数字艺术教育 2015-07-24 14:19:50 职业教育 pi px 阅读(3398) 评论(0) 声明:本文由入驻搜狐公众 ...
- Lock读写锁技术的妙用
1.面试题1:三个线程读,三个线程写同一个数据 public class ReadWriteLockTest { public static void main(String[] args) { fi ...
- 47. 数组中出现次数超过一半的数字[Number appears more than half times]
[题目]:数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字. 例如长度为9的数组{1,2,3,2,2,2,5,4,2}中次数超过了数组长度的一半的数字为2,而长度为8的数组{1,2,3,2 ...
- phpstorm安装,破解及使用
小黑小波比.下载安装phpstorm以及破解 PHPStorm下XDebug配置 phpstorm官方下载地址 PhpStorm 注册码 2.在这输入用户名和注册码,点击OK 破解成功! phpsto ...
- JDBC 基础知识总结
1. 何谓JDBC --- Java Database Connectivity. 由Sun 公司提供的访问数据库的一组java类和接口,用来对数据库进行链接.发送SQL语句.处理返回结果,为开发 ...
- Vue基础
1.可以使用 methods 来替代 computed,效果上两个都是一样的. 但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. {{ reversedMessage ...
- 数据结构之---二叉树C实现
学过数据结构的都知道树,那么什么是树? 树(tree)是包含n(n>0)个结点的有穷集,其中: (1)每个元素称为结点(node): (2)有一个特定的结点被称为根结点或树根(root). (3 ...
- Lombok 介绍
Lombok使用 介绍 在项目中使用Lombok可以减少很多重复代码的书写.比如说getter/setter/toString等方法的编写. IDEA中的安装 打开IDEA的Setting –> ...
- c++ 实现拓扑排序
要简洁大方地实现拓扑排序,首先要了解两个标准模板 std::queue 和 std::vector 1 queue 添加头文件 #include<queue> 定义一个int类型的队列 q ...
前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...
项目示例地址: https://github.com/ccyinghua/webpack-multipage 项目运行: 下载项目之后 # 下载依赖 npm install # 运行 npm run ...
const path = require('path'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const Html ...
为什么要配置多页面开发? · 由于单页面应用不利于SEO,对于某些资讯类网站不够友好,而多页面则能够更优的解决此问题. · 传统的多页面开发模式(如java的jsp等) 前后端耦合性大,开发效率低,代 ...
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求,此记录为统一配置出入口. 2. 实例 2.1 页面配置 使用vue脚手架搭建 ...
1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求. 2. 实例 2.1 页面配置 2.1.1 默认首页 使用vue脚手架搭建后 ...
准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题. 又或者后面其他同事接手你的模块,或者改你的bug ...
webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
- HackerNews——《Pokemon Go玩家存在巨大的安全风险》
译者注:原文来自HackerNews,首发tumblr,标题为Pokemon Go is a huge security risk.作者Adam Reeve,附一张这个胖子的帅照 (正文)之所以会 ...
- UI设计中px、pt、ppi、dpi、dp、sp之间的关系
UI设计中px.pt.ppi.dpi.dp.sp之间的关系 武汉AAA数字艺术教育 2015-07-24 14:19:50 职业教育 pi px 阅读(3398) 评论(0) 声明:本文由入驻搜狐公众 ...
- Lock读写锁技术的妙用
1.面试题1:三个线程读,三个线程写同一个数据 public class ReadWriteLockTest { public static void main(String[] args) { fi ...
- 47. 数组中出现次数超过一半的数字[Number appears more than half times]
[题目]:数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字. 例如长度为9的数组{1,2,3,2,2,2,5,4,2}中次数超过了数组长度的一半的数字为2,而长度为8的数组{1,2,3,2 ...
- phpstorm安装,破解及使用
小黑小波比.下载安装phpstorm以及破解 PHPStorm下XDebug配置 phpstorm官方下载地址 PhpStorm 注册码 2.在这输入用户名和注册码,点击OK 破解成功! phpsto ...
- JDBC 基础知识总结
1. 何谓JDBC --- Java Database Connectivity. 由Sun 公司提供的访问数据库的一组java类和接口,用来对数据库进行链接.发送SQL语句.处理返回结果,为开发 ...
- Vue基础
1.可以使用 methods 来替代 computed,效果上两个都是一样的. 但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. {{ reversedMessage ...
- 数据结构之---二叉树C实现
学过数据结构的都知道树,那么什么是树? 树(tree)是包含n(n>0)个结点的有穷集,其中: (1)每个元素称为结点(node): (2)有一个特定的结点被称为根结点或树根(root). (3 ...
- Lombok 介绍
Lombok使用 介绍 在项目中使用Lombok可以减少很多重复代码的书写.比如说getter/setter/toString等方法的编写. IDEA中的安装 打开IDEA的Setting –> ...
- c++ 实现拓扑排序
要简洁大方地实现拓扑排序,首先要了解两个标准模板 std::queue 和 std::vector 1 queue 添加头文件 #include<queue> 定义一个int类型的队列 q ...
