vue配置多页面的实现方法

//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理

exports.entries = function () {
var entryFiles = glob.sync(PAGE_PATH + '//.js')
var map = {}
entryFiles.forEach((filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('/') + 1,filePath.lastIndexOf('.'))
map[filename] = filePath
})
return map
}

//多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function () {
let entryHtml = glob.sync(PAGE_PATH + '//.html')
let arr = []
entryHtml.forEach((filePath) => {
let filename = filePath.substring(filePath.lastIndexOf('/') + 1,filePath.lastIndexOf('.'))
let conf = {
// 模板来源
template: filePath,// 文件名称
filename: filename + '.html',// 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
chunks: ['manifest','vendor',filename],inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf,{
minify: {
removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true
},chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}

const createLintingRule = () => ({
test: /.(js|vue)$/,loader: 'eslint-loader',enforce: 'pre',include: [resolve('src'),resolve('test')],options: {
formatter: require('eslint-friendly-formatter'),emitWarning: !config.dev.showEslintErrorsInOverlay
}
})

module.exports = {
context: path.resolve(__dirname,'../'),//注释代码开始
// entry: {
// app: './src/main.js'
// },//注释代码结束
//新增代码开始
entry: utils.entries(),//新增代码结束
output: {
path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},resolve: {
extensions: ['.js','.vue','.json'],alias: {
'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}
},module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),{
test: /.vue$/,loader: 'vue-loader',options: vueLoaderConfig
},{
test: /.js$/,loader: 'babel-loader',resolve('test'),resolve('node_modules/webpack-dev-server/client')]
},{
test: /.(png|jpe?g|gif|svg)(?.)?$/,loader: 'url-loader',options: {
limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.)?$/,name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',fs: 'empty',net: 'empty',tls: 'empty',child_process: 'empty'
}
}

const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig,{
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,extract: true,usePostCSS: true
})
},devtool: config.build.productionSourceMap ? config.build.devtool : false,output: {
path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},sourceMap: config.build.productionSourceMap,parallel: true
}),// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),// Setting the following option to false will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to true because we are seeing that sourcemaps are included in the codesplit bundle as well when it's false,// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,}),// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true,map: { inline: false } }
: { safe: true }
}),// 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,// 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'
// }),//注释代码结束
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',minChunks (module) {
// 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',minChunks: Infinity
}),// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk,similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',async: 'vendor-async',children: true,minChunks: 3
}),// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname,to: config.build.assetsSubDirectory,ignore: ['.*']
}
])
//修改代码开始
].concat(utils.htmlPlugin())
//修改代码结束
})

if (config.build.productionGzip) {
const 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
})
)
}

if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig