Vue Cli 构建多页面应用时配置 preload 插件

Vue CLI 可以通过在 vue.config.js 文件下配置 pages 进行多入口打包配置，实现多页面应用开发。

多页面模式下如果要修改插件配置，可能会出现一些问题，常见的就是 preload-webpack-plugin 插件。

配置示例：

// vue.config.js
module.exports = {
    
    
  pages: {
    
    
    pc: {
    
    /*...*/},
    h5: {
    
    /*...*/}
  },
  chainWebpack(config) {
    
    
    config.plugin("preload").tap(() => [
      {
    
    
        rel: "preload",
        //...
      }
    ]);
  },
  // ...
}

这样打包的时候会报错：

Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use(<Plugin>) first.

原因是 config.plugin("preload") 并没有获取到名为 preload 的插件实例。

官方提示：

当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件 (这时会存在多个 html-webpack-plugin 和 preload-webpack-plugin 的实例)。如果你试图修改这些插件的选项，请确认运行 vue inspect。

删除了插件配置，使用 vue inspect 查看 webpack 配置，原来多页面模式下，Vue Cli 分别配置了与页面相同数量的插件配置：

{
    
    
  plugins: [
    //...
    // 2 个 html-webpack-plugin 配置
    /* config.plugin('html-h5') */
    new HtmlWebpackPlugin(/*...*/),
    /* config.plugin('html-pc') */
    new HtmlWebpackPlugin(/*...*/)
    
    // 2 个 preload-webpack-plugin 的 preload 配置
    /* config.plugin('preload-h5') */
    new PreloadPlugin({
    
    rel: 'preload',/*...*/})
    /* config.plugin('preload-pc') */
    new PreloadPlugin({
    
    rel: 'preload',/*...*/})

    // 2 个 preload-webpack-plugin 的 prefetch 配置
    /* config.plugin('preload-h5') */
    new PreloadPlugin({
    
    rel: 'prefetch',/*...*/})
    /* config.plugin('preload-pc') */
    new PreloadPlugin({
    
    rel: 'prefetch',/*...*/})
  ]
}

注释中也标注了获取插件实例的标识是 preload-h5 和 preload-pc，而不是 preload。

所以只需使用新的标识进行配置即可：

// vue.config.js
const pages = {
    
    
    pc: {
    
    /*...*/},
    h5: {
    
    /*...*/}
}
module.exports = {
    
    
  pages: pages,
  chainWebpack(config) {
    
    
    Objects.keys(pages).forEach(name => {
    
    
      config.plugin(`preload-${
      
      name}`).tap(() => [
        {
    
    
          rel: "preload",
          // ...
        }
      })
    ]);
  },
  // ...
}