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实现异步多文件上传
Dec 02 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
js窗口震动小程序分享
Nov 28 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
JS监听事件的叠加和移除功能
Nov 19 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
vue-router传参用法详解
Jan 19 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
php提取微信账单的有效信息
2018/10/01 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
使用Python在Windows下获取USB PID&VID的方法
2019/07/02 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
标准毕业生自荐信范文
2013/11/04 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android