Nutritious Potato Munchies

    posthtml-loader

    2.0.1 • Public • Published

    npm node deps tests coverage code style chat

    PostHTML Loader

    Install

    npm i -D posthtml-loader

    Usage

    import html from './file.html'

    webpack.config.js

    module: {
      rules: [
        {
          test: /\.html$/,
          use: [
            'html-loader',
            {
              loader: 'posthtml-loader',
              options: {
                ident: 'posthtml',
                parser: 'PostHTML Parser',
                plugins: [
                  /* PostHTML Plugins */
                  require('posthtml-plugin')(options)
                ]
              }
            }
          ]
        }
      ]
    },

    Options

    Name Type Default Description
    config {Object} undefined PostHTML Config
    parser {String/Function} undefined PostHTML Parser
    skipParse {Boolean} false PostHTML Options SkipParse
    render {String/Function} undefined PostHTML Render
    plugins {Array/Function} [] PostHTML Plugins
    sync {boolean} false PostHTML Options Sync
    directives {Array<Object>} [] PostHTML Options custom Directives

    Config

    Name Type Default Description
    path {String} loader.resourcePath PostHTML Config Path
    ctx {Object} {} PostHTML Config Context

    If you want to use are shareable config file instead of inline options in your webpack.config.js create a posthtml.config.js file and place it somewhere down the file tree in your project. The nearest config relative to dirname(file) currently processed by the loader applies. This enables Config Cascading. Despite some edge cases the config file will be loaded automatically and no additional setup is required. If you don't intend to use Config Cascading, it's recommended to place posthtml.config.js in the root ./ of your project

    src
    ├── components
    │   ├──  component.html
    │   ├──  posthtml.config.js (components)
    ├── index.html
    ├── posthtml.config.js (index)
    └── webpack.config.js
    

    Path

    If you normally place all your config files in a separate folder e.g ./config it is necessary to explicitly set the config path in webpack.config.js

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        config: {
          path: 'path/to/.config/'
        }
      }
    }

    Context

    Name Type Default Description
    env {String} 'development' process.env.NODE_ENV
    file {Object} { dirname, basename, extname } File
    options {Object} {} Plugin Options (Context)

    posthtml.config.js

    module.exports = ({ file, options, env }) => ({
      parser: 'posthtml-sugarml',
      plugins: {
        'posthtml-include': options.include,
        'posthtml-content': options.content,
        'htmlnano': env === 'production' ? {} : false
      }
    })

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        config: {
          ctx: {
            include: {...options},
            content: {...options}
          }
        }
      }
    }

    Parser

    If you want to use a custom parser e.g SugarML, you can pass it in under the parser key in the loader options

    {String}

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        parser: 'posthtml-sugarml'
      }
    }

    {Function}

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        parser: require('posthtml-sugarml')()
      }
    }

    skipParse

    If you want to use disable parsing, you can pass it in under the skipParse key in the loader options

    {Boolean}

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        skipParse: false
      }
    }

    Render

    If you want to use a custom render, you can pass it in under the render key in the loader options

    {String}

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        render: 'posthtml-you-render'
      }
    }

    {Function}

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        parser: require('posthtml-you-render')()
      }
    }

    Plugins

    Plugins are specified under the plugins key in the loader options

    {Array}

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        plugins: [
          require('posthtml-plugin')()
        ]    
      }
    }

    {Function}

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        plugins (loader) {
          return [
            require('posthtml-plugin')()
          ]
        }
      }
    }

    Sync

    Enables sync mode, plugins will run synchronously, throws an error when used with async plugins

    {Boolean}

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        sync: true
      }
    }

    Directives

    If you want to use a custom directives, you can pass it in under the directives key in the loader options

    {Array}

    webpack.config.js

    {
      loader: 'posthtml-loader',
      options: {
        directives: [{name: '?php', start: '<', end: '>'}]
      }
    }

    Maintainer


    Michael Ciniawsky

    Ivan Demidov

    Install

    npm i posthtml-loader

    DownloadsWeekly Downloads

    2,950

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    16.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • michael-ciniawsky
    • scrum
    • voischev