基于Vue.js的大型报告页项目实现过程及问题总结（一）

修改构建生产的webpack配置webpack.prod.conf.js

varpath=require('path')
varconfig=require('../config')
varutils=require('./utils')
varwebpack=require('webpack')
varmerge=require('webpack-merge')
varbaseWebpackConfig=require('./webpack.base.conf')
varExtractTextPlugin=require('extract-text-webpack-plugin')
varHtmlWebpackPlugin=require('html-webpack-plugin')
varCleanPlugin=require('clean-webpack-plugin')//webpack插件，用于清除目录文件
varglob=require('glob');
varenv=config.build.env

varwebpackConfig=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.htmlnewwebpack.DefinePlugin({
'process.env':env
}),
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
newCleanPlugin(['../dist']),//清空生成目录
newwebpack.optimize.OccurenceOrderPlugin(),
//extractcssintoitsownfile
newExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
//generatedistindex.htmlwithcorrectassethashforcaching.
//youcancustomizeoutputbyediting/index.html
//seehttps://github.com/ampedandwired/html-webpack-plugin//splitvendorjsintoitsownfile
newwebpack.optimize.CommonsChunkPlugin({
name:'vendor',
minChunks:function(module,count){
//anyrequiredmodulesinsidenode_modulesareextractedtovendor
return(
module.resource&&
/\.js$/.test(module.resource)&&
module.resource.indexOf(
path.join(__dirname,'../node_modules')
)===0
)
}
}),
//extractwebpackruntimeandmodulemanifesttoitsownfileinorderto
//preventvendorhashfrombeingupdatedwheneverappbundleisupdated
newwebpack.optimize.CommonsChunkPlugin({
name:'manifest',
chunks:['vendor']
})
]
})

if(config.build.productionGzip){
varCompressionWebpackPlugin=require('compression-webpack-plugin')

webpackConfig.plugins.push(
newCompressionWebpackPlugin({
asset:'[path].gz[query]',
algorithm:'gzip',
test:newRegExp(
'\\.('+
config.build.productionGzipExtensions.join('|')+
')$'
),
threshold:10240,
minRatio:0.8
})
)
}

module.exports=webpackConfig

functiongetEntry(globPath){
varentries={},
basename,tmp,pathname;
if(typeof(globPath)!="object"){
globPath=[globPath]
}
globPath.forEach((itemPath)=>{
glob.sync(itemPath).forEach(function(entry){
basename=path.basename(entry,path.extname(entry));
if(entry.split('/').length>4){
tmp=entry.split('/').splice(-3);
pathname=tmp.splice(0,1)+'/'+basename;//正确输出js和html的路径
entries[pathname]=entry;
}else{
entries[basename]=entry;
}
});
});
returnentries;
}

varpages=getEntry(['./src/module/*.html','./src/module/**/*.html']);

for(varpathnameinpages){
//配置生成的html文件，定义路径等
varconf={
filename:pathname+'.html',
template:pages[pathname],//模板路径
inject:true,//js插入位置
//necessarytoconsistentlyworkwithmultiplechunksviaCommonsChunkPlugin
chunksSortMode:'dependency'
};

if(pathnameinmodule.exports.entry){
conf.chunks=['manifest','vendor',pathname];
conf.hash=true;
}

module.exports.plugins.push(newHtmlWebpackPlugin(conf));
}

varpath=require('path')
varconfig=require('../config')
varutils=require('./utils')
varwebpack=require('webpack')
varmerge=require('webpack-merge')
varbaseWebpackConfig=require('./webpack.base.conf')
varExtractTextPlugin=require('extract-text-webpack-plugin')
varHtmlWebpackPlugin=require('html-webpack-plugin')
varCleanPlugin=require('clean-webpack-plugin')//webpack插件，用于清除目录文件
varglob=require('glob');
varenv=config.build.env

varwebpackConfig=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.htmlnewwebpack.DefinePlugin({
'process.env':env
}),
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
newCleanPlugin(['../dist']),//清空生成目录
newwebpack.optimize.OccurenceOrderPlugin(),
//extractcssintoitsownfile
newExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
//generatedistindex.htmlwithcorrectassethashforcaching.
//youcancustomizeoutputbyediting/index.html
//seehttps://github.com/ampedandwired/html-webpack-plugin//splitvendorjsintoitsownfile
newwebpack.optimize.CommonsChunkPlugin({
name:'vendor',
minChunks:function(module,count){
//anyrequiredmodulesinsidenode_modulesareextractedtovendor
return(
module.resource&&
/\.js$/.test(module.resource)&&
module.resource.indexOf(
path.join(__dirname,'../node_modules')
)===0
)
}
}),
//extractwebpackruntimeandmodulemanifesttoitsownfileinorderto
//preventvendorhashfrombeingupdatedwheneverappbundleisupdated
newwebpack.optimize.CommonsChunkPlugin({
name:'manifest',
chunks:['vendor']
})
]
})

if(config.build.productionGzip){
varCompressionWebpackPlugin=require('compression-webpack-plugin')

webpackConfig.plugins.push(
newCompressionWebpackPlugin({
asset:'[path].gz[query]',
algorithm:'gzip',
test:newRegExp(
'\\.('+
config.build.productionGzipExtensions.join('|')+
')$'
),
threshold:10240,
minRatio:0.8
})
)
}

module.exports=webpackConfig

functiongetEntry(globPath){
varentries={},
basename,tmp,pathname;
if(typeof(globPath)!="object"){
globPath=[globPath]
}
globPath.forEach((itemPath)=>{
glob.sync(itemPath).forEach(function(entry){
basename=path.basename(entry,path.extname(entry));
if(entry.split('/').length>4){
tmp=entry.split('/').splice(-3);
pathname=tmp.splice(0,1)+'/'+basename;//正确输出js和html的路径
entries[pathname]=entry;
}else{
entries[basename]=entry;
}
});
});
returnentries;
}

varpages=getEntry(['./src/module/*.html','./src/module/**/*.html']);

for(varpathnameinpages){
//配置生成的html文件，定义路径等
varconf={
filename:pathname+'.html',
template:pages[pathname],//模板路径
inject:true,//js插入位置
//necessarytoconsistentlyworkwithmultiplechunksviaCommonsChunkPlugin
chunksSortMode:'dependency'
};

if(pathnameinmodule.exports.entry){
conf.chunks=['manifest','vendor',pathname];
conf.hash=true;
}

module.exports.plugins.push(newHtmlWebpackPlugin(conf));
}

修改配置文件config

修改index.js

在build.js中会引用assetsRoot，这里就是对应的根目录，改成你想要输出的地址就好了。ps：这里是相对地址
assetsPublicPath会被引用插入到页面的模版中，这个是你资源的根目录

//seehttp://vuejs-templates.github.io/webpackfordocumentation.
varpath=require('path')

module.exports={
build:{
env:require('./prod.env'),
index:path.resolve(__dirname,'../dist/index.html'),
assetsRoot:path.resolve(__dirname,'../dist'),
assetsSubDirectory:'static',
assetsPublicPath:'../',
productionSourceMap:true,
//Gzipoffbydefaultasmanypopularstatichostssuchas
//SurgeorNetlifyalreadygzipallstaticassetsforyou.
//Beforesettingto`true`,makesureto:
//npminstall--save-devcompression-webpack-plugin
productionGzip:false,
productionGzipExtensions:['js','css']
},
dev:{
env:require('./dev.env'),
port:8080,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable:{},
//CSSSourcemapsoffbydefaultbecauserelativepathsare"buggy"
//withthisoption,accordingtotheCSS-LoaderREADME
//(https://github.com/webpack/css-loader#sourcemaps)
//Inourexperience,theygenerallyworkasexpected,
//justbeawareofthisissuewhenenablingthisoption.
cssSourceMap:false
}
}