Output path

Option: outputPath

Type: string

Default: Webpack output.path configuration.

Specifies the output directory for HTML files.

Possible values:

Absolute path to output directory.
Relative path to Webpack output.path configuration.

Example

Source file structure:

src/index.html
src/main.js

Source HTML file src/index.html:

<!doctype html>
<html>
  <head>
    <script src="./main.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Webpack Configuration:

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/'), // Root output directory for all assets
  },
  plugins: [
    new HtmlBundlerPlugin({
      // Absolute HTML output directory
      outputPath: path.join(__dirname, 'dist/example/'),
      // OR relative to `output.path`:
      // outputPath: 'example/',
      entry: {
        index: './src/index.html', // Output: dist/example/index.html
      },
      js: {
        filename: '[name].bundle.js',
        outputPath: 'assets/js/', // JS output path relative to output.path
      },
    }),
  ],
};

Processed output file structure:

dist/example/index.html
dist/assets/js/main.bundle.js

Generated HTML file dist/example/index.html:

<!doctype html>
<html>
  <head>
    <script src="../assets/js/main.bundle.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Example​

Example