{"id":24983669,"url":"https://github.com/posthtml/posthtml-loader","last_synced_at":"2025-04-11T20:52:04.051Z","repository":{"id":57328809,"uuid":"49443108","full_name":"posthtml/posthtml-loader","owner":"posthtml","description":"PostHTML for Webpack","archived":false,"fork":false,"pushed_at":"2020-09-15T14:59:06.000Z","size":86,"stargazers_count":42,"open_issues_count":3,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-29T21:06:06.573Z","etag":null,"topics":["loader-options","posthtml","posthtml-loader","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posthtml.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2016-01-11T17:43:22.000Z","updated_at":"2024-07-09T13:57:21.000Z","dependencies_parsed_at":"2022-09-13T23:03:40.739Z","dependency_job_id":null,"html_url":"https://github.com/posthtml/posthtml-loader","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posthtml","download_url":"https://codeload.github.com/posthtml/posthtml-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248480516,"owners_count":21110936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loader-options","posthtml","posthtml-loader","webpack"],"created_at":"2025-02-04T09:20:16.275Z","updated_at":"2025-04-11T20:52:04.022Z","avatar_url":"https://github.com/posthtml.png","language":"JavaScript","readme":"[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![deps][deps]][deps-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![code style][style]][style-url]\n[![chat][chat]][chat-url]\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/posthtml/posthtml\"\u003e\n    \u003cimg width=\"220\" height=\"200\" title=\"PosHTML\"           src=\"http://posthtml.github.io/posthtml/logo.svg\"\u003e\n  \u003c/a\u003e\n  \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003ch1\u003ePostHTML Loader\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003eInstall\u003c/h2\u003e\n\n```bash\nnpm i -D posthtml-loader\n```\n\n\u003ch2 align=\"center\"\u003eUsage\u003c/h2\u003e\n\n```js\nimport html from './file.html'\n```\n\n**webpack.config.js**\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.html$/,\n      use: [\n        'html-loader',\n        {\n          loader: 'posthtml-loader',\n          options: {\n            ident: 'posthtml',\n            parser: 'PostHTML Parser',\n            plugins: [\n              /* PostHTML Plugins */\n              require('posthtml-plugin')(options)\n            ]\n          }\n        }\n      ]\n    }\n  ]\n},\n```\n\n\u003ch2 align=\"center\"\u003eOptions\u003c/h2\u003e\n\n|Name|Type|Default|Description|\n|:--:|:--:|:-----:|:----------|\n|**[`config`](#config)**|`{Object}`|`undefined`|PostHTML Config|\n|**[`parser`](#parser)**|`{String/Function}`|`undefined`|PostHTML Parser|\n|**[`skipParse`](#skipParse)**|`{Boolean}`|`false`|PostHTML Options SkipParse|\n|**[`render`](#render)**|`{String/Function}`|`undefined`|PostHTML Render|\n|**[`plugins`](#plugins)**|`{Array/Function}`|`[]`|PostHTML Plugins|\n|**[`sync`](#sync)**|`{boolean}`|`false`|PostHTML Options Sync|\n|**[`directives`](#directives)**|`{Array\u003cObject\u003e}`|`[]`|PostHTML Options custom [Directives](https://github.com/posthtml/posthtml-parser#directives)|\n\n### `Config`\n\n|Name|Type|Default|Description|\n|:--:|:--:|:-----:|:----------|\n|**[`path`](#path)**|`{String}`|`loader.resourcePath`|PostHTML Config Path|\n|**[`ctx`](#context)**|`{Object}`|`{}`|PostHTML Config Context|\n\n\nIf 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\n\n```\nsrc\n├── components\n│   ├──  component.html\n│   ├──  posthtml.config.js (components)\n├── index.html\n├── posthtml.config.js (index)\n└── webpack.config.js\n```\n\n#### `Path`\n\nIf 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`\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    config: {\n      path: 'path/to/.config/'\n    }\n  }\n}\n```\n\n#### `Context`\n\n|Name|Type|Default|Description|\n|:--:|:--:|:-----:|:----------|\n|`env`|`{String}`|`'development'`|process.env.NODE_ENV|\n|`file`|`{Object}`|`{ dirname, basename, extname }`|File|\n|`options`|`{Object}`|`{}`|Plugin Options (Context)|\n\n[**posthtml.config.js**](https://github.com/posthtml/posthtml-load-config)\n```js\nmodule.exports = ({ file, options, env }) =\u003e ({\n  parser: 'posthtml-sugarml',\n  plugins: {\n    'posthtml-include': options.include,\n    'posthtml-content': options.content,\n    'htmlnano': env === 'production' ? {} : false\n  }\n})\n```\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    config: {\n      ctx: {\n        include: {...options},\n        content: {...options}\n      }\n    }\n  }\n}\n```\n\n### `Parser`\n\nIf you want to use a custom parser e.g [SugarML](https://github.com/posthtml/sugarml), you can pass it in under the `parser` key in the loader options\n\n#### `{String}`\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    parser: 'posthtml-sugarml'\n  }\n}\n```\n\n#### `{Function}`\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    parser: require('posthtml-sugarml')()\n  }\n}\n```\n\n### `skipParse`\n\nIf you want to use disable parsing, you can pass it in under the `skipParse` key in the loader options\n\n#### `{Boolean}`\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    skipParse: false\n  }\n}\n```\n\n### `Render`\n\nIf you want to use a custom render, you can pass it in under the `render` key in the loader options\n\n#### `{String}`\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    render: 'posthtml-you-render'\n  }\n}\n```\n\n#### `{Function}`\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    parser: require('posthtml-you-render')()\n  }\n}\n```\n\n### `Plugins`\n\nPlugins are specified under the `plugins` key in the loader options\n\n#### `{Array}`\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    plugins: [\n      require('posthtml-plugin')()\n    ]    \n  }\n}\n```\n\n#### `{Function}`\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    plugins (loader) {\n      return [\n        require('posthtml-plugin')()\n      ]\n    }\n  }\n}\n```\n\n### `Sync`\n\nEnables sync mode, plugins will run synchronously, throws an error when used with async plugins\n\n#### `{Boolean}`\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    sync: true\n  }\n}\n```\n\n### `Directives`\n\nIf you want to use a custom directives, you can pass it in under the `directives` key in the loader options\n\n#### `{Array}`\n\n**webpack.config.js**\n```js\n{\n  loader: 'posthtml-loader',\n  options: {\n    directives: [{name: '?php', start: '\u003c', end: '\u003e'}]\n  }\n}\n```\n\n\u003ch2 align=\"center\"\u003eMaintainer\u003c/h2\u003e\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150 height=\"150\"\n        src=\"https://github.com/michael-ciniawsky.png?v=3\u0026s=150\"\u003e\n        \u003cbr /\u003e\n        \u003ca href=\"https://github.com/michael-ciniawsky\"\u003eMichael Ciniawsky\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\" src=\"https://github.com/Scrum.png?v=3\u0026s=150\"\u003e\n        \u003cbr /\u003e\n        \u003ca href=\"https://github.com/Scrum\"\u003eIvan Demidov\u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctbody\u003e\n\u003c/table\u003e\n\n\n[npm]: https://img.shields.io/npm/v/posthtml-loader.svg\n[npm-url]: https://npmjs.com/package/posthtml-loader\n\n[node]: https://img.shields.io/node/v/posthtml-loader.svg\n[node-url]: https://nodejs.org/\n\n[deps]: https://david-dm.org/posthtml/posthtml-loader.svg\n[deps-url]: https://david-dm.org/posthtml/posthtml-loader\n\n[tests]: http://img.shields.io/travis/posthtml/posthtml-loader.svg\n[tests-url]: https://travis-ci.org/posthtml/posthtml-loader\n\n[cover]: https://coveralls.io/repos/github/posthtml/posthtml-loader/badge.svg\n[cover-url]: https://coveralls.io/github/posthtml/posthtml-loader\n\n[style]: https://img.shields.io/badge/code%20style-standard-yellow.svg\n[style-url]: http://standardjs.com/\n\n[chat]: https://badges.gitter.im/posthtml/posthtml.svg\n[chat-url]: https://gitter.im/posthtml/posthtml\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposthtml%2Fposthtml-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-loader/lists"}