vue cli重构多页面脚手架实例分享

var glob = require('glob')

var HtmlWebpackPlugin = require('html-webpack-plugin')

var PAGE_PATH = path.resolve(__dirname, '../src/views')

var merge = require('webpack-merge')

//多入口配置

//获取views文件夹下，每个页面下的index.js作为页面入口，故每个页面下都必须有index.js

exports.entries = function() {

 var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')

 var map = {}, tmp = [], pathname = '';

 entryFiles.forEach((filePath) => {

 var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))

 tmp = filePath.split('/').splice(-4)

 map[tmp[2] + '/' + filename] = filePath

 })

 return map

}

//多页面输出配置

//读取views文件夹下的对应每个页面的html后缀文件，然后放入数组中

//如果想要更深的定制或者修改，建议大家看一下CommonsChunkPlugin

//推荐一个基础的 https://segmentfault.com/q/1010000009070061

exports.htmlPlugin = function() {

 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')

 let arr = []

 entryHtml.forEach((filePath) => {

 let jsPath = '', tmp = [];

 let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))

 tmp = filePath.split('/').splice(-4)

 jsPath = tmp[2] + '/' + 'index'

 let conf = {

  template: filePath,

  filename: filename + '.html',

  chunks: ['manifest', 'vendors', jsPath],

  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

}

step2 修改webpack.base.conf.js文件配置的入口

// entry: {

// app: './src/main.js'

// },

entry: utils.entries(),

step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码，将其注释掉：

new HtmlWebpackPlugin({

 filename: 'index.html',

 template: 'index.html',

 inject: true

}),

// new HtmlWebpackPlugin({

 // filename: 'index.html',

 // template: 'index.html',

 // inject: true

 // }),

 new FriendlyErrorsPlugin()

 ].concat(utils.htmlPlugin())

step4 修改webpack.prod.conf.js 找到下面的代码，注释掉：

new HtmlWebpackPlugin({

filename: 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'

}),

new CopyWebpackPlugin([{

  from: path.resolve(__dirname, '../static'),

  to: config.build.assetsSubDirectory,

  ignore: ['.*']

 }])

 ].concat(utils.htmlPlugin())