单页改多页 示例

config/pages.js 增加入口js配置文件

module.exports = {
  basedir: './src/pages', // 多页根目录
  entryName: 'main.js', // 入口js
  templateName: 'index.html', // 入口模板名称
  suffix: '.html', // 模板后缀
  pages: [
    'demo', 'user'
  ]
}

建目录文件

src/pages/demo/main.js
src/pages/demo/index.html
src/pages/user/main.js

config/index.js 引入pages

const pages = require('./pages')
module.exports = {
  pages,
  dev: {...

build/webpack.base.conf.js 修改入口

const entry = utils.createdEntry(config.pages)

module.exports = {
  entry,
  // entry: {
  //   app: './src/main.js'
  // },

build/utils.js

const fs = require('fs')

exports.createdEntry = (options) => { // 获取入口entry
  const {pages, basedir, entryName} = options

  let entrys = {}
  pages.map(page => {
    let checkDir = path.resolve(`${basedir}/${page}/${entryName}`)
    if( !fs.existsSync(checkDir) ) {
      console.error(`请创建【${checkDir}】`)
    }

    entrys[page] = `${basedir}/${page}/${entryName}`
  })
  return entrys
}

exports.getHtmlPlugin = (options, HtmlWebpackPlugin) => {
  const {basedir, templateName, suffix, pages} = options
  return pages.map(page => {
    let file = `${basedir}/${page}/${templateName}`
    // 自定义html还是默认html模板
    let template = fs.existsSync(file) ? file : templateName
    let conf = {
      title: page,
      template,
      filename: `${page}${suffix}`,
      chunks: [page], // 隔离目录
      inject: true
    }
    if(process.env.NODE_ENV === 'production') { // 生产模式
      conf = Object.assign(conf, {
        chunks: ['manifest', 'vendor', page],
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          minifyCSS: true
        },
        chunksSortMode: 'dependency'
      })
    }

    return new HtmlWebpackPlugin(conf)
  })
}

build/webpack.dev.conf.js

build/webpack.prod.conf.js

  找到 devWebpackConfig.plugins
  注释掉
  // new HtmlWebpackPlugin(),
  ]增加
  .concat(utils.getHtmlPlugin(config.pages, HtmlWebpackPlugin))
})

module.exports = new Promise((resolve, reject) => {

个人ui ui.29mn.com/#/doc/multi…