umi chainwebpack配置prerender-spa-plugin-next无效

agxfikkp  于 2022-12-31  发布在  Webpack
关注(0)|答案(2)|浏览(685)

What happens?

prerender-spa-plugin-next 是一个生成支持seo静态页面的插件。

cra创建的项目中,webpack配置如下,可以正常工作

// const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path')
const PrerenderSPAPlugin = require("prerender-spa-plugin-next");

const renderer = require('@prerenderer/renderer-puppeteer')

module.exports = (config, env) => {
  if (env === 'production') {
    config.plugins = config.plugins.concat([
      new PrerenderSPAPlugin({
        routes: ['/'],
        renderer,
        rendererOptions: {
          // 引用地址
          executablePath: path.resolve('../../chrome-mac/Chromium.app/Contents/MacOS/Chromium')
        },
        staticDir: path.join(__dirname, 'dist'),
      })
    ]);
  }

  return config;
};

umi4中下面两种配置方式都不生效,不知为什么

方式一

const PrerenderSPAPlugin = require('prerender-spa-plugin-next')

const renderer = require('@prerenderer/renderer-puppeteer')
// 配置文件
  chainWebpack(memo, { env, webpack }) {
    // 添加额外插件
    if (env === 'production') {
      memo.plugin('prerender-spa-plugin-next').use(new PrerenderSPAPlugin({
        renderer,
        rendererOptions: {
          executablePath: path.resolve('../../chrome-mac/Chromium.app/Contents/MacOS/Chromium'),
        },
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/docs'],
      }));
    }
  },

方式二

const PrerenderSPAPlugin = require('prerender-spa-plugin-next')

const renderer = require('@prerenderer/renderer-puppeteer')
// 配置文件
chainWebpack(memo, { env, webpack }) {
    // 添加额外插件
      memo.plugin('prerender-spa-plugin-next').use(PrerenderSPAPlugin, [{
        renderer,
        rendererOptions: {
          executablePath: path.resolve('../../chrome-mac/Chromium.app/Contents/MacOS/Chromium'),
        },
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/docs'],
      }]);
    }
  },
gdx19jrr

gdx19jrr1#

在 umi 4 里没有 HtmlWebpackPlugin 这个插件了,但是 prerender-spa-plugin-next 是通过 HtmlWebpackPlugin 实现的,所以用不了了。

llycmphe

llycmphe2#

memo.plugin('html-webpack-plugin').use(HtmlWebpackPlugin);

主动加上htmlwebpackplugin也不好使

相关问题