Webpack SSI Include Loader

Usage no npm install needed!

<script type="module">
  import webpackSsiIncludeLoader from 'https://cdn.skypack.dev/webpack-ssi-include-loader';


Webpack SSI Include Loader

NPM version GitHub last commit



this package was created to help dev that have to work on with SSI and webpack. it will help for setting a dev environment.

scan html content looking for pattern like :

<!--#include virtual="/your/path/file.html" -->
<!--#include file"/your/path/file.html" -->

if found any :

  • first look if the file can be found on the local machine, following the localPath
  • if not, try to find the file online following the location http url
  • if not, return an error message


yarn add webpack-ssi-include-loader
module: {
      rules: [
            test: /\.html?$/,
            use: [
                loader: 'html-loader', // Used to output as html
                loader: 'webpack-ssi-include-loader',
                options: {
                  localPath: path.join(__dirname, '/public'),
                  location: 'https://your.website.com/', // http url where the file can be dl


Parameters Type Default Description
location string http url where the file can be dl ex:'https://mywebsite.com/'
localPath string path where the include files could be found ex: path.join(__dirname, '/public')
depthMax number 4 how far should the SSI include should look for match within included files
disableLocalScan boolean false if you want the script to look only on the location url
includesMatcher regex /<!--\s?#\s?include\s+(?:virtual|file)="([^"]+)"?\s?-->/g regex of the matching string (don't touch unless you know what you are doing)
defaultCharset string utf-8 force the file reader to convert the file content into a specific charset
quietError boolean false if the file cannot be found on local or online replace it with an error message or not
onFileMatch function null callback on each SSI line match with 3 parameters : filePath<string>, fileContent<string>, isLocal<boolean>.
If you return a string it will override and replace the content