anthonygore / html-critical-webpack-plugin

A webpack plugin that will extract critical CSS. Now supports Webpack v4.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiple source pages

shaunmac opened this issue · comments

I need to render multiple html pages, how do I go about that?

I've tried

...
plugins: [
  new HtmlCriticalPlugin([
      {
        base: path.resolve(__dirname, 'dist'),
        src: 'index.html',
        dest: 'index.html',
        inline: true,
        minify: true,
        extract: true,
        width: 375,
        height: 565,
        penthouse: {
          blockJSRequests: false,
        }
      },
      {
        base: path.resolve(__dirname, 'dist'),
        src: 'about.html',
        dest: 'about.html',
        inline: true,
        minify: true,
        extract: true,
        width: 375,
        height: 565,
        penthouse: {
          blockJSRequests: false,
        }
      }
    ])
]

My errors:
Error: A valid source is required.

Hi,

You can just create two instances of the plugin eg.

plugins: [
  new HtmlCriticalPlugin([
      {
        base: path.resolve(__dirname, 'dist'),
        src: 'index.html',
        dest: 'index.html',
        inline: true,
        minify: true,
        extract: true,
        width: 375,
        height: 565,
        penthouse: {
          blockJSRequests: false,
        }
      }),
    new HtmlCriticalPlugin([{
        base: path.resolve(__dirname, 'dist'),
        src: 'about.html',
        dest: 'about.html',
        inline: true,
        minify: true,
        extract: true,
        width: 375,
        height: 565,
        penthouse: {
          blockJSRequests: false,
        }
      }
    ])
]