sitemap-generator-webpack-plugin v0.2.0

sitemap-generator-webpack-plugin

Webpack plugin to generate a sitemap.

Getting Started

To begin, you'll need to install sitemap-generator-webpack-plugin:

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

yarn add -D sitemap-generator-webpack-plugin

pnpm add -D sitemap-generator-webpack-plugin

Then add the plugin to your webpack config. For example:

webpack.config.js

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

module.exports = {
  plugins: [new SitemapPlugin({ baseURL: 'https://your.website' })],
};

sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://your.website/index.html</loc>
  </url>
</urlset>

Note

sitemap-generator-webpack-plugin is to use files that already exist in the source tree, as part of the build process.

Note

If you want to add custom locations for sitemap.xml, you can use urls options

Usage

The plugin's signature:

webpack.config.js

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

module.exports = {
  plugins: [new SitemapPlugin({ baseURL, urls, emitted, options })],
};

• baseURL
• urls
• emitted
• options

baseURL (required)

Root URL of your site (e.g. https://your.website)

Type: string

urls

Optional array of locations on your site. These can be strings or you can provide object to customize each url.

Type:

type urls = Array<string | SitemapURL>;

type SitemapURL = {
  loc: string;
  lastmod?: string;
  priority?: number;
  changefreq?: Changefreq;
};

Note

If you provide the object in array, the following attributes may be set on each path object.

emitted

Optional object to customize each url by webpack emitted assets. If you set to boolean true, the emitted all .html file being used

• callback
• pattern

callback

Callback function for use emitted asset filename

Type:

type callback = (location: string) => Omit<SitemapURL, 'loc'>;

• sitemapURL

Default: N/A

pattern

Specific pattern to filter the asset (e.g. .html), This can be string (glob pattern) or you can provide function instead of string pattern

Type:

type pattern = string | ((asset: string) => boolean) | undefined;

Default: **/*.html

Note

pattern use glob pattern to filter asset. For more information, follow the links below

• Glob Pattern Reference | Visual Studio Code
• Featrues | minimatch

options

Optional object of configuration settings.

Examples

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SitemapPlugin = require('sitemap-generator-webpack-plugin');

const entries = ['index', 'help', 'ejs'];
const entry = {};
const views = [];
entries.forEach((name) => {
  entry[name] = path.resolve(__dirname, `src/js/${name}.js`);

  const htmlPlugin = new HtmlWebpackPlugin({
    chunks: [name],
    minify: false,
    filename: `${name}.${name.includes('ejs') ? 'ejs' : 'html'}`,
    template: path.resolve(__dirname, `src/views/${name}.ejs`),
  });

  views.push(htmlPlugin);
});

module.exports = {
  mode: 'production',
  entry: {
    index: path.resolve(__dirname, 'path/to/index.js')
    entry: path.resolve(__dirname, 'path/to/entry.js')
    ejs: path.resolve(__dirname, 'path/to/ejs.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
  },
  plugins: [
    new SitemapPlugin({
      baseURL: 'https://your.website',
      emitted: {
        callback: (location) => ({
          priority: location.includes('index') ? 1 : undefined,
          changefreq: 'yearly',
        }),
        pattern: `**/*.{html,ejs}`,
      },
      urls: [
        'first',
        { loc: 'second.html', lastmod: '2023-12-19', priority: 0.3 },
      ],
      options: {
        filename: 'my-sitemap.xml',
        format: true,
        changefreq: 'monthly',
        lastmod: true,
        priority: 0.6,
      },
    }),
    new HtmlWebpackPlugin({
      chunks: ['index'],
      filename: 'index.html',
      template: path.resolve(__dirname, 'path/to/index.html'),
    }),
    new HtmlWebpackPlugin({
      chunks: ['entry'],
      filename: 'entry.html',
      template: path.resolve(__dirname, 'path/to/entry.html'),
    }),
    new HtmlWebpackPlugin({
      chunks: ['ejs'],
      filename: 'ejs.ejs',
      template: path.resolve(__dirname, 'path/to/ejs.html'),
    }),
  ],
};

my-sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://your.website/index.html</loc>
    <lastmod>2023-12-19T03:29:51.291Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://your.website/first</loc>
    <lastmod>2023-12-19T03:29:51.291Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.6</priority>
  </url>
  <url>
    <loc>https://your.website/entry.html</loc>
    <lastmod>2023-12-19T03:29:51.291Z</lastmod>
    <changefreq>yearly</changefreq>
  </url>
  <url>
    <loc>https://your.website/ejs.ejs</loc>
    <lastmod>2023-12-19T03:29:51.291Z</lastmod>
    <changefreq>yearly</changefreq>
  </url>
  <url>
    <loc>https://your.website/second.html</loc>
    <lastmod>2023-12-19</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.3</priority>
  </url>
</urlset>

webpack.config.js

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

module.exports = {
  // Some webpack config
  ...,
  plugins: [
    new SitemapPlugin({
      baseURL: 'https://your.website',
      urls: Array.from({ length: 150000 }, (_, i) => ({
        loc: `${i}.html`,
        lastmod:
          i < 50000 ? `2023-12-19` : undefined,
      })),
    }),
  ],
};

sitemap.xml

<?xml version="1" encoding="UTF-8"?>
<sitemapindex>
  <sitemap>
    <loc>https://your.website/sitemap1.xml</loc>
    <lastmod>2023-12-19</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://your.website/sitemap2.xml</loc>
  </sitemap>
  <sitemap>
    <loc>https://your.website/sitemap3.xml</loc>
  </sitemap>
</sitemapindex>

sitemap1.xml

<?xml version="1" encoding="UTF-8"?>
<urlset>
  <url>
    <loc>https://your.website/0.html</loc>
    <lastmod>2023-12-19</lastmod>
  </url>
  <url>
    <loc>https://your.website/1.html</loc>
    <lastmod>2023-12-19</lastmod>
  </url>
  ... 49,998 items
</urlset>

License

MIT