vue-cli单页应用改成多页应用配置详解

exports.assetsPath = function(_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production' ?
config.build.assetsSubDirectory :
config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory,_path)
}

exports.cssLoaders = function(options) {
options = options || {}
// generate loader string to be used with extract text plugin
function generateLoaders(loaders) {
var sourceLoader = loaders.map(function(loader) {
var extraParamChar
if (/?/.test(loader)) {
loader = loader.replace(/?/,'-loader?')
extraParamChar = '&'
} else {
loader = loader + '-loader'
extraParamChar = '?'
}
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
}).join('!')

if (options.extract) {
return ExtractTextPlugin.extract('vue-style-loader',sourceLoader)
} else {
return ['vue-style-loader',sourceLoader].join('!')
}
}

// http://vuejs.github.io/vue-loader/configurations/extract-css.html
return {
css: generateLoaders(['css']),postcss: generateLoaders(['css']),less: generateLoaders(['css','less']),sass: generateLoaders(['css','sass?indentedSyntax']),scss: generateLoaders(['css','sass']),stylus: generateLoaders(['css','stylus']),styl: generateLoaders(['css','stylus'])
}
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function(options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp('.' + extension + '$'),loader: loader
})
}
return output
}
//增加获取多入口的方法 注意 这个参数是个数组
exports.getEntry = function(globPaths) {
var entries = {},basename,tmp,pathname;
for (globPath of globPaths) {
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(entries);
return entries;
}

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
// new HtmlWebpackPlugin({
// filename: 'index.html',// template: 'index.html',// inject: true
// })
]
})

var pages = utils.getEntry(['./src/module/*/.html','./src/m/*/.html']);

for (var pathname in pages) {

// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',template: pages[pathname],// 模板路径
favicon: './src/assets/images/wechat.png',inject: true // js插入位置

};

if (pathname in module.exports.entry) {
conf.chunks = ['vendors',pathname];
conf.hash = true;
}

module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

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,drop_debugger: true,drop_console: true
}
}),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,// favicon: './src/assets/images/tjd.ico',// 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: new RegExp(
'.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),threshold: 10240,minRatio: 0.8
})
)
}

var pages = utils.getEntry(['./src/module/*/.html','./src/m/*/.html']);

for (var pathname in pages) {

// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',inject: true // js插入位置

};
if (pathname in pages) {
conf.chunks = ['vendors',pathname];
conf.hash = true;
}

module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}