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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 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源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
在python中做正态性检验示例
2019/12/09 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Python中格式化字符串的四种实现
2020/05/26 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Python 如何展开嵌套的序列
2020/08/01 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
父母对孩子的寄语
2014/04/09 职场文书
社区维稳工作方案
2014/06/06 职场文书
新教师培训方案
2014/06/08 职场文书
单位租房协议范本
2014/12/03 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS