https://github.com/janghye0k/generate-sitemap-webpack-plugin
Webpack plugin to generate a sitemap.
https://github.com/janghye0k/generate-sitemap-webpack-plugin
sitemap sitemap-generator webpack webpack-plugin
Last synced: 2 months ago
JSON representation
Webpack plugin to generate a sitemap.
- Host: GitHub
- URL: https://github.com/janghye0k/generate-sitemap-webpack-plugin
- Owner: janghye0k
- License: mit
- Created: 2023-12-08T05:57:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-28T02:15:26.000Z (over 2 years ago)
- Last Synced: 2025-03-08T16:46:56.384Z (over 1 year ago)
- Topics: sitemap, sitemap-generator, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 354 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[![npm][npm]][npm-url]
[![node][node]][node-url]
[](https://packagephobia.com/result?p=generate-sitemap-webpack-plugin)
# generate-sitemap-webpack-plugin
Webpack plugin to generate a sitemap.
## Getting Started
To begin, you'll need to install generate-sitemap-webpack-plugin:
```shell
npm install generate-sitemap-webpack-plugin --save-dev
```
```shell
yarn add -D generate-sitemap-webpack-plugin
```
```shell
pnpm add -D generate-sitemap-webpack-plugin
```
Then add the plugin to your webpack config. For example:
**webpack.config.js**
```javascript
const SitemapPlugin = require('generate-sitemap-webpack-plugin');
module.exports = {
plugins: [new SitemapPlugin({ baseURL: 'https://your.website' })],
};
```
**sitemap.xml**
```xml
https://your.website/index.html
```
> **Note**
>
> `generate-sitemap-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**
```javascript
const SitemapPlugin = require('generate-sitemap-webpack-plugin');
module.exports = {
plugins: [new SitemapPlugin({ baseURL, urls, emitted, chunk, options })],
};
```
- **[`baseURL`](#baseURL)**
- **[`urls`](#urls)**
- **[`emitted`](#emitted)**
- **[`chunk`](#chunk)**
- **[`options`](#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:
```typescript
type urls = Array;
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.
| Name | Type | Default | Description |
| -------------------- | -------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `loc`
(required) | `string` | N/A | URL of the page (e.g. some/link). Sum of this value and baseURL must be less than 2,048 characters. |
| `lastmod` | `string` | `undefined` | The date of last modification of the page (e.g. 2023-12-08). This date should be in W3C Datetime format. This format allows you to omit the time portion, if desired, and use YYYY-MM-DD. |
| `priority` | `number` | `undefined` | The priority of this URL relative to other URLs on your site. Valid values range from 0.0 to 1.0. |
| `changefreq` | `string` | `undefined` | How frequently the page is likely to change. List of applicable values based on [sitemaps.org](https://www.sitemaps.org/protocol.html):
`always`, `hourly`, `daily`, `weekly`, `monthly`, `yearly`, `never` |
### `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`](#callback)**
- **[`pattern`](#pattern)**
#### `callback`
Callback function for use emitted asset filename
Type:
```typescript
type callback = (
location: string
) => Omit | undefined | null;
```
- **[sitemapURL](#urls)**
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:
```typescript
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](https://code.visualstudio.com/docs/editor/glob-patterns)
> - [Featrues | minimatch](https://github.com/isaacs/minimatch#features)
### `chunk`
Optional object to customize each url by webpack chunk. You can use auxiliary files to make sitemap include image
- **[`callback`](#callback)**
- **[`img`](#pattern)**
#### `callback`
Callback function for use chunk
Type (Required) :
```typescript
type callback = (
name: string,
hash: string
) => SitemapURL | string | undefined | null;
```
Default: `N/A`
#### `img`
Options for add image locations
Type: `boolean`
Default: `true`
> Note
>
> If you provide `options.chunk.img = true` each url automatically contains auxiliary files which image extension is matched
> `imageExtList = [apng, avif, gif, jpg, jpeg, jfif, pjpeg, pjp, png, svg, webp, bmp, ico, cur, tif, tiff]`
### `options`
Optional object of configuration settings.
| Name | Type | Default | Description |
| ------------ | -------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `filename` | `string` | `sitemap.xml` | Name of the sitemap file emitted to your build output |
| `format` | `boolean` | `false` | Settings for format sitemap file. You can provide formatting options for write file prettier |
| `gzip` | `boolean` | `true` | Generating a gzipped `.xml.gz` sitemap. You can provide false to skip generating a gzipped. By default, both xml files are generated |
| `lastmod` | `string` / `boolean` | `false` | The date for on all urls. Can be overridden by url-specific lastmod config. If value is true, the current date will be used for all urls. |
| `priority` | `number` | `undefined` | A to be set globally on all locations. Can be overridden by url-specific priorty config.0. |
| `changefreq` | `string` | `undefined` | A to be set globally on all locations. Can be overridden by url-specific changefreq config. |
[npm]: https://img.shields.io/npm/v/generate-sitemap-webpack-plugin.svg
[npm-url]: https://www.npmjs.com/package/generate-sitemap-webpack-plugin
[node]: https://img.shields.io/node/v/generate-sitemap-webpack-plugin.svg
[node-url]: https://nodejs.org
[size]: https://packagephobia.now.sh/badge?p=generate-sitemap-webpack-plugin
[size-url]: https://packagephobia.now.sh/result?p=generate-sitemap-webpack-plugin
## Examples
### 1. Complex Example
**webpack.config.js**
```javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SitemapPlugin = require('generate-sitemap-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, // default: false
gzip: true // default: 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
https://your.website/index.html
2023-12-19T03:29:51.291Z
yearly
1
https://your.website/first
2023-12-19T03:29:51.291Z
monthly
0.6
https://your.website/entry.html
2023-12-19T03:29:51.291Z
yearly
https://your.website/ejs.ejs
2023-12-19T03:29:51.291Z
yearly
https://your.website/second.html
2023-12-19
monthly
0.3
```
### 2. Split Example
**webpack.config.js**
```javascript
const SitemapPlugin = require('generate-sitemap-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,
})),
options: {
format: true
}
}),
],
};
```
**sitemap.xml**
```xml
https://your.website/sitemap1.xml
2023-12-19
https://your.website/sitemap2.xml
https://your.website/sitemap3.xml
```
**sitemap1.xml**
```xml
https://your.website/0.html
2023-12-19
https://your.website/1.html
2023-12-19
... 49,998 items
```
### 3. Chunk Example
**webpack.config.js**
```javascript
const SitemapPlugin = require('generate-sitemap-webpack-plugin');
module.exports = {
// Some webpack config
...,
entry: {
index: 'path/to/index.js'
skip: 'path/to/skip.js'
},
module: {
rules: [
{
test: /\.(?:jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/i,
type: 'asset/resource',
generator: {
filename: 'assets/[name]-[hash][ext]',
},
},
],
},
plugins: [
new SitemapPlugin({
baseURL: 'https://your.website',
chunk: {
callback: (name) => (name === 'skip' ? null : name + '.html'),
},
emitted: false,
options: {
format: true,
},
}),
],
};
```
**index.js**
```javascript
import Sample from 'path/to/asset/sample.png';
import Move from 'path/to/asset/move.gif';
... some scripts
```
**sitemap.xml**
```xml
https://your.website/index.html
https://your.website/assets/move-31d6cfe0d16ae931b73c.gif
https://your.website/assets/sample-31d6cfe0d16ae931b73c.png
```
## License
[MIT](./LICENSE)
[npm]: https://img.shields.io/npm/v/generate-sitemap-webpack-plugin.svg
[npm-url]: https://npmjs.com/package/generate-sitemap-webpack-plugin
[node]: https://img.shields.io/node/v/generate-sitemap-webpack-plugin.svg
[node-url]: https://nodejs.org