vue-cli3.x 多页面打包引入CDN

entry.js 入口

const glob = require('glob')
const path = require('path')
// 配置pages多页面获取当前文件夹下的html和js
function getEntry (globPath) {
  let [entries, basename] = [{}, '']
  let tmp
  let pathname
  let template
  let filename
  glob.sync(globPath).forEach(function (entry, i) {
    template = entry.split('.')[0] + '.html'
    basename = path.basename(entry, path.extname(entry))
    tmp = entry.split('/').splice(-3)
    pathname = tmp.splice(0, 1) + '/' + basename // 正确输出js和html的路径
    filename = pathname + '.html'
    entries[basename] = {
      entry,
      template,
      filename,
      // chunks: []
      chunks: ['chunk-vendors', 'chunk-common', basename]
    }
  })

  return entries
}

module.exports = getEntry

vue.config.js 配置要引入的cdn

const getEntry = require('./entry.js')
const cdn = { // 引用的CDN地址
  js: ['https://cdn.jsdelivr.net/npm/vue']
}
module.exports = {
  pages: getEntry('src/modules/*/*.js'), // 入口
  chainWebpack: config => {
    const entry = Object.keys(getEntry('src/modules/*/*.js'))
    for (const iterator of entry) {
       config
        .plugin(`html-${iterator}`)
        .tap(args => {
           args[0].cdn = cdn;
           return args
        })
    }
  }
  configureWebpack: (config) => {
    if (isProduction) { // 判断是否是生产环境
      config.externals = { // 需要以cdn引入的模块
         'vue': 'Vue'
      }
    }
  }
}

index.html,遍历cdn引入地址


<html>
<head>
head>
<body>
  <div id="app">div>
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>">script>
  <% } %>
body>

html>

你可能感兴趣的:(vue)