npm i -D posthtml-loader
importhtmlfrom'./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)
]
}
}
]
}
]
},
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 customDirectives |
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 yourwebpack.config.js
create aposthtml.config.js
file and place it somewhere down the file tree in your project. The nearest config relative todirname(file)
currently processed by the loader applies. This enablesConfig Cascading.Despite some edge cases the config file will be loaded automatically andnoadditional setup is required. If you don't intend to use Config Cascading, it's recommended to placeposthtml.config.js
in theroot./
of your project
src
├── components
│ ├── component.html
│ ├── posthtml.config.js (components)
├── index.html
├── posthtml.config.js (index)
└── webpack.config.js
If you normally place all your config files in a separate folder e.g./config
it is necessary to explicitly set the config path inwebpack.config.js
webpack.config.js
{
loader:'posthtml-loader',
options:{
config:{
path:'path/to/.config/'
}
}
}
Name | Type | Default | Description |
---|---|---|---|
env |
{String} |
'development' |
process.env.NODE_ENV |
file |
{Object} |
{ dirname, basename, extname } |
File |
options |
{Object} |
{} |
Plugin Options (Context) |
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}
}
}
}
}
If you want to use a custom parser e.gSugarML,you can pass it in under theparser
key in the loader options
webpack.config.js
{
loader:'posthtml-loader',
options:{
parser:'posthtml-sugarml'
}
}
webpack.config.js
{
loader:'posthtml-loader',
options:{
parser:require('posthtml-sugarml')()
}
}
If you want to use disable parsing, you can pass it in under theskipParse
key in the loader options
webpack.config.js
{
loader:'posthtml-loader',
options:{
skipParse:false
}
}
If you want to use a custom render, you can pass it in under therender
key in the loader options
webpack.config.js
{
loader:'posthtml-loader',
options:{
render:'posthtml-you-render'
}
}
webpack.config.js
{
loader:'posthtml-loader',
options:{
parser:require('posthtml-you-render')()
}
}
Plugins are specified under theplugins
key in the loader options
webpack.config.js
{
loader:'posthtml-loader',
options:{
plugins:[
require('posthtml-plugin')()
]
}
}
webpack.config.js
{
loader:'posthtml-loader',
options:{
plugins(loader){
return[
require('posthtml-plugin')()
]
}
}
}
Enables sync mode, plugins will run synchronously, throws an error when used with async plugins
webpack.config.js
{
loader:'posthtml-loader',
options:{
sync:true
}
}
If you want to use a custom directives, you can pass it in under thedirectives
key in the loader options
webpack.config.js
{
loader:'posthtml-loader',
options:{
directives:[{name:'?php',start:'<',end:'>'}]
}
}
Michael Ciniawsky |
Ivan Demidov |