铁雪资源网 Design By www.gsvan.com

红色为更改后的不同之处

vue 多入口文件搭建 vue多页面搭建的实例讲解

vue 多入口文件搭建

在webpack.base.conf

中修改

var
path = require('path')
var
config = require('../config')
var
utils = require('./utils')
var
projectRoot = 
path.resolve(__dirname,'../')
var glob = require('glob');
var entries = getEntry('./src/module/*.js'); // 获得入口js文件
module.exports = {
entry: entries,
output: {
path:config.build.assetsRoot,
publicPath:process.env.NODE_ENV
 ==='production' "base-entrys:");
console.log(5,entries);
return entries;
}

vue 多入口文件搭建 vue多页面搭建的实例讲解

这样一来的话,就在中细分,最后输出html都在dist下。

这里的字符串操作也是和路径的情况相匹配的,如果有需要进行其他方式的设定,注意在这里修改路径的识别。

vue多页面搭建

vue 多入口文件搭建 vue多页面搭建的实例讲解

原本的webpack.dev.conf中有一个插件的设置内容

对这部分内容进行修改

vue 多入口文件搭建 vue多页面搭建的实例讲解

var
config = require('../config')
var
webpack = require('webpack')
var
merge = require('webpack-merge')
var
utils = require('./utils')
var
baseWebpackConfig = 
require('./webpack.base.conf')
var
HtmlWebpackPlugin = 
require('html-webpack-plugin')
var path = require('path');
var glob = require('glob');
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function
 (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports =merge(baseWebpackConfig,
 {
module: {
loaders:
utils.styleLoaders({
sourceMap: config.dev.cssSourceMap })
},
// eval-source-map is faster for development
devtool:
'#eval-source-map',
plugins: [
new
webpack.DefinePlugin({
'process.env':config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new
webpack.optimize.OccurenceOrderPlugin(),
new
webpack.HotModuleReplacementPlugin(),
new
webpack.NoErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
]
})
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function(entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = basename; // 正确输出js和html的路径
entries[pathname] = entry;
});
console.log("dev-entrys:");
console.log(entries);
return entries;
}
var pages = getEntry('./pages/*.html');
console.log("dev pages----------------------");
for (var pathname in pages) {
console.log("filename:" + pathname + '.html');
console.log("template:" + pages[pathname]);
// 配置生成的html文件,定义路径等
var conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
minify: { //传递 html-minifier 选项给 minify 输出
removeComments: true
},
inject: 'body', // js插入位置
chunks: [pathname, "vendor", "manifest"] // 每个html引用的js模块,也可以在这里加上vendor等公用模块
};
// 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
----------------------------------------------
webpack.prod.conf配置
和webpack.dev.conf.js中做类似的处理,
先注释掉原来的HtmlWebpackPlugin,然后在下面添加函数,
通过迭代插入多个HtmlWebpackPlugin。
var
path =require('path')
var
config =require('../config')
var
utils =require('./utils')
var
webpack =require('webpack')
var
merge =require('webpack-merge')
var
baseWebpackConfig =require('./webpack.base.conf')
var
ExtractTextPlugin =require('extract-text-webpack-plugin')
var
HtmlWebpackPlugin =require('html-webpack-plugin')
var
env =process.env.NODE_ENV ==='testing'
"prod-entrys:");
console.log(entries);
return entries;
}
var pages =getEntry('./pages/*.html');
console.log("prod pages-----");
for (varpathname inpages) {
 
 console.log("filename:"+pathname +'.html');
console.log("template:"+pages[pathname]);
// 配置生成的html文件,定义路径等
var conf = {
filename: pathname +'.html',
template: pages[pathname],// 模板路径
minify:{ //
removeComments:true,
collapseWhitespace: false
},
inject: true,// js插入位置
chunks: [pathname,"vendor", "manifest"]// 每个html引用的js模块,也可以在这里加上vendor等公用模块
};
// 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(newHtmlWebpackPlugin(conf));
}

以上这篇vue 多入口文件搭建 vue多页面搭建的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
vue多页面搭建

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“vue 多入口文件搭建 vue多页面搭建的实例讲解”

暂无vue 多入口文件搭建 vue多页面搭建的实例讲解的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。