princed/posthtml-loader

PostHTML for Webpack

Loader for PostHTML

Install

(sudo) npm i -D posthtml-loader

Usage

Setup

// webpack.config.js

module: {
  loaders: [
    {
      test: /\.html$/,
      loader: 'html!posthtml'
    },
  ]
},

posthtml: function () {
  return {
    defaults: [ PostHTML Plugins ]
    // Add our own Plugin Packs
  }
}

Options

module.exports = {
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: 'html!posthtml?pack=html'
      }
      {
        test: /\.svg$/,
        loader: 'svg!posthtml?pack=svg'
      }
    ]
  },

  posthtml: function () {
    return {
      defaults: [],
      html: [ PostHTML Plugins ],
      svg: [ PostHTML Plugins ]
    }
  }
}

Extract

extract-text-plugin

var ExtractText = require('extract-text-webpack-plugin')

module.exports = {
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: ExtractText.extract('html!posthtml')
      }
    ]
  },

  posthtml: function () {
    return {
      defaults: [ PostHTML Plugins ]
    }
  },

  plugins: [
    new ExtractText('file.html')
  ]
}

Integration

Templates

EJS

ejs-html-loader

{ test: /\.ejs$/, loader: 'html!posthtml!ejs-html' }

Jade

jade-html-loader

{ test: /\.jade$/, loader: 'html!posthtml!jade-html' }

Templates supported by consolidate

template-html-loader

{ test: /\.hbs$/, loader: 'html!posthtml!template-html?engine=handlebars' }

String

HTML

html-loader

{ test: /\.html$/, loader: 'html!posthtml' }

SVG

svg-loader

{ test: /\.svg$/, loader: 'svg!posthtml' }

XML

xml-loader

{ test: /\.xml$/, loader: 'xml!posthtml' }

File

file-loader && val-loader

HTML

html-loader

{ test: /\.html$/, loader: 'file?name=[name].[ext]!val!html!posthtml' }

SVG

svg-loader

{ test: /\.svg$/, loader: 'file?name=[name].[ext]!val!svg!posthtml' }

DOM

dom-loader

HTML

html-loader

{ test: /\.html$/, loader: 'dom!html!posthtml' }

SVG

svg-loader

{ test: /\.svg$/, loader: 'dom!svg!posthtml' }