sitemap-webpack-plugin

sitemap-webpack-plugin 是一个用于生成网站地图(sitemap)的 Webpack 插件。它会遍历你的 Webpack 打包后的文件，并生成一个包含所有页面 URL 的 XML 文件。

安装

通过 npm 安装：

npm install sitemap-webpack-plugin --save-dev

用法

在 webpack.config.js 中引入该插件，并将其添加到插件数组中：

const SitemapPlugin = require('sitemap-webpack-plugin').default;

module.exports = {
  // ...
  plugins: [
    new SitemapPlugin('https://example.com', ['/', '/about', '/contact']),
  ],
};

上面的代码会生成包含 /, /about 和 /contact 页面 URL 的 XML 文件，并将它们的根路径设置为 https://example.com。

当然，如果你不想硬编码所有页面的 URL，可以使用插件提供的 sitemapPaths 选项，从某个文件中读取页面 URL：

new SitemapPlugin('https://example.com', require('./sitemap-paths.json')),

其中 sitemap-paths.json 内容类似于：

[
  "/",
  "/about",
  "/contact"
]

选项

sitemap-webpack-plugin 的选项有：

• base：站点基准 URL，如 https://example.com，默认值是 ''。
• paths：要包含在地图中的页面 URL 列表，形如 ['/', '/about']。
• sitemapPaths：用于提供页面 URL 列表的 JSON 文件路径或 URL，如 require('./sitemap-paths.json')。
• filename：生成的地图文件名，如 sitemap.xml，默认值为 sitemap.xml。
• changefreq：页面更新频率，可选值为 'always'、'hourly'、'daily'、'weekly'、'monthly'、'yearly' 和 'never'，默认值为 ''。
• priority：该页面在站点中的重要程度，范围为 0 到 1，默认为 0.5。

示例

以下是一个完整的 webpack.config.js 文件，它会生成一个包含所有页面 URL 的地图文件：

const path = require('path');
const SitemapPlugin = require('sitemap-webpack-plugin').default;

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new SitemapPlugin('https://example.com', ['/']),
  ],
};

结论

sitemap-webpack-plugin 是一个简单易用的插件，能够帮助你快速生成网站地图。如果你的网站需要 SEO 优化，那么它是一个必不可少的工具。