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


Posted in Javascript onMarch 12, 2018

红色为更改后的不同之处

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' ? 
config.build.assetsPublicPath :config.dev.assetsPublicPath,
filename: '[name].js'
},
resolve: {
extensions: ['','.js',
'.vue'],
fallback: [path.join(__dirname,'../node_modules')],
alias: {
'src':path.resolve(__dirname,'../src'),
'assets':path.resolve(__dirname,'../src/assets'),
'components':path.resolve(__dirname,'../src/components')
}
},
resolveLoader: {
fallback: [path.join(__dirname,'../node_modules')]
},
module: {
loaders: [
{
test: /\.vue$/,
loader:'vue'
},
{
test: /\.js$/,
loader:'babel',
include:projectRoot,
exclude: /node_modules/
},
{
test: /\.json$/,
loader:'json'
},
{
test: /\.html$/,
loader:'vue-html'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader:'url',
query: {
limit:10000,
name:utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader:'url',
query: {
limit:10000,
name:utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
vue: {
loaders:utils.cssLoaders()
}
}
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
console.log(1,basename);
tmp = entry.split('/').splice(-3);
console.log(2,tmp);
pathname = basename; // 正确输出js和html的路径
console.log(3,pathname);
entries[pathname] = entry;
console.log(4,entry);
});
console.log("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'
?
require('../config/test.env')
:
config.build.env
var
glob =require('glob');
module.exports =merge(baseWebpackConfig,
 {
module: {
loaders:
utils.styleLoaders({sourceMap:
config.build.productionSourceMap,extract:
true })
},
devtool:
config.build.productionSourceMap ?'#source-map' :
false,
output: {
path:
config.build.assetsRoot,
filename:
utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename:
utils.assetsPath('js/[id].[chunkhash].js')
},
vue: {
loaders:
utils.cssLoaders({
sourceMap:
config.build.productionSourceMap,
extract:
true
})
},
plugins: [
// http://vuejs.github.io/vue-loader/workflow/production.html
new
webpack.DefinePlugin({
'process.env':env
}),
new
webpack.optimize.UglifyJsPlugin({
compress: {
warnings:
false
}
}),
new
webpack.optimize.OccurenceOrderPlugin(),
// extract css into its own file
new
ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
// new HtmlWebpackPlugin({
// filename: process.env.NODE_ENV === 'testing'
// ? 'index.html'
// : 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'
// }),
// split vendor js into its own file
new
webpack.optimize.CommonsChunkPlugin({
name:
'vendor',
minChunks:
function (module,count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource)
 &&
module.resource.indexOf(
path.join(__dirname,'../node_modules')
) ===
0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new
webpack.optimize.CommonsChunkPlugin({
name:
'manifest',
chunks: ['vendor']
})
]
})
if (config.build.productionGzip)
 {
var
CompressionWebpackPlugin =require('compression-webpack-plugin')
webpackConfig.plugins.push(
new
CompressionWebpackPlugin({
asset:
'[path].gz[query]',
algorithm:
'gzip',
test:
newRegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|')
 +
')$'
),
threshold:
10240,
minRatio:
0.8
})
)
}
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 = tmp.splice(0,1) + '/' + basename; // 正确输出js和html的路径
entries[pathname] =entry;
});
console.log("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多页面搭建的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
浅析Ajax语法
Dec 05 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 #Javascript
angular5 httpclient的示例实战
Mar 12 #Javascript
vue 简单自动补全的输入框的示例
Mar 12 #Javascript
webpack打包js的方法
Mar 12 #Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 #Javascript
vue路由懒加载的实现方法
Mar 12 #Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 #Javascript
You might like
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
用 JSON 处理缓存
2007/04/27 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
航空大学应届生求职信
2013/11/10 职场文书
保险专业求职信
2014/07/07 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers