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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
js中的数组对象排序分析
Dec 11 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 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遍历XML文档所有节点的方法
2015/03/12 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
Python中的tuple元组详细介绍
2015/02/02 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
python爬虫基础知识点整理
2020/06/02 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
停电调休通知
2015/04/16 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python