【亲测免费】 prerender-spa-plugin 使用教程

1. 项目的目录结构及介绍

prerender-spa-plugin 是一个用于预渲染单页应用（SPA）的 Webpack 插件。以下是其基本的目录结构：

prerender-spa-plugin/
├── src/
│   ├── index.js
│   └── utils/
├── examples/
│   ├── basic/
│   └── advanced/
├── lib/
│   ├── index.js
│   └── utils/
├── package.json
├── README.md
└── webpack.config.js

• src/：包含插件的源代码。
• examples/：包含使用该插件的示例项目。
• lib/：包含编译后的插件代码。
• package.json：项目的依赖和脚本配置。
• README.md：项目的说明文档。
• webpack.config.js：示例项目的 Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 src/index.js，这是插件的入口文件。以下是该文件的基本结构：

const PrerenderSPAPlugin = require('./lib/PrerenderSPAPlugin');

module.exports = PrerenderSPAPlugin;

该文件导出了 PrerenderSPAPlugin 类，这是插件的核心类。

3. 项目的配置文件介绍

项目的配置文件主要是 webpack.config.js，以下是一个基本的配置示例：

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: ['/', '/about'],
      renderer: new Renderer({
        renderAfterDocumentEvent: 'render-event'
      })
    })
  ]
};

• entry：指定入口文件。
• output：指定输出文件的路径和名称。
• plugins：配置 PrerenderSPAPlugin 插件，包括 staticDir（输出目录）、routes（需要预渲染的路由）和 renderer（渲染器配置）。

通过以上配置，可以在 Webpack 构建过程中使用 prerender-spa-plugin 插件进行预渲染。