vue2:vue.config.js 多页面打包（pages）注意点

1. 按照官网说明，先贴出自己 vue.config.js 里的pages配置

const VUE_APP_KEY = process.env.VUE_APP_KEY;
const entry      = process.env.entry      || "Apps/example/main.js";
const template   = process.env.template   || "Apps/example/index.html";
const title      = process.env.title      || "示例";
const filename   = process.env.filename   || "index.html";
let pages = {
  index: {
    // page 的入口
    entry: entry,
    // 模板来源
    template:template,
    // 在 dist/index.html 的输出
    filename: filename,
    // title:title,
    // 在这个页面中包含的块，默认情况下会包含
    // 提取出来的通用 chunk 和 vendor chunk。
    chunks: ['chunk-libs', 'chunk-vant', 'chunk-commons', 'runtime', 'index'],
  },
  
}

module.exports = {
    // 其他配置项...
    pages
}

2. 如果你打包配置了代码分割splitChunks,如下

config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial', // only package third parties that are initially dependent
          },
          elementUI: {
            name: 'chunk-vant', // split vant into a single package
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            test: /[\\/]node_modules[\\/]_?vant(.*)/, // in order to adapt to cnpm
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      })

      config.optimization.runtimeChunk('single')

——那么pages 的hunks数组里的值要和配置splitChunks里面的name的值对应。

——如果你配置了单独内嵌vue 的runtime，这个也一定要写到chunks里面，不然页面也是白屏或者其他问题。

3. 另外一点要注意的就是，这里引用下官网原文：
当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件 (这时会存在多个 html-webpack-plugin
和 preload-webpack-plugin 的实例)。如果你试图修改这些插件的选项，请确认运行 vue inspect。

具体到代码里就是和那两个插件相关的配置要结合多页面pages里面的名称使用，不明白什么意思的直接看下面代码配置示例：

Object.keys(pages).forEach((element) => {
        config.plugin('preload-' + element).tap(() => [
          {
            rel: 'preload',
            // to ignore runtime.js
            fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
            include: 'initial',
          },
        ])
        config
          .plugin('ScriptExtHtmlWebpackPlugin')
          .after('html-' + element)
          .use('script-ext-html-webpack-plugin', [
            {
              // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/,
            },
          ])
          .end()
        config.plugins.delete('prefetch-' + element)
      })

原来没有多页面配置时，是这样的：

        config.plugin('preload').tap(() => [
          {
            rel: 'preload',
            // to ignore runtime.js
            fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
            include: 'initial',
          },
        ])
        config
          .plugin('ScriptExtHtmlWebpackPlugin')
          .after('html')
          .use('script-ext-html-webpack-plugin', [
            {
              // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/,
            },
          ])
          .end()
        config.plugins.delete('prefetch')
      })

       
对比下就知道了，多页面配置下，html插件的实例名称会和页面名称结合变成html-index、html-subpage这种形式，preload插件也是如此