Renders Pug template to HTML or template function. Resolves source files of scripts, styles, images in Pug . Uses Pug template as entry point.
ISC License
Bot releases are visible (Hide)
v4.1.0
- v4.9.9
Added support of an inline script using the ?inline
query.
Resolve required resources in attribute blocks:
img&attributes({
src: require('./image.png'),
srcset: `${require('./image1.png')} 80w, ${require('./image2.png')} 90w`,
})
Added the js.verbose
option to display extract info.
Added the js.outputPath
option:
new PugPlugin({
js: {
verbose: true,
filename: '[name].[contenthash].js',
outputPath: 'assets/js/',
},
}),
Added short option name css
as alias for extractCss
option.
Now use the new option name css
instead of extractCss
:
new PugPlugin({
css: {
filename: 'assets/css/[name].[contenthash].css',
},
}),
Added new js
option with filename
property as alias for Webpack output.filename
:
new PugPlugin({
js: {
filename: 'assets/js/[name].[contenthash].js',
},
}),
The js.filename
option has prio over output.filename
option.
Added resolving url() in inlined CSS using the ?inline
query
USAGE CHANGES since v4.4.0
Pug template
//- to inline CSS use exact the `?inline` query
style=require('./styles.scss?inline')
use Webpack config without the type asset/source
{
test: /\.(css|sass|scss)$/,
use: ['css-loader', 'sass-loader'],
}
Added support for the inline CSS w/o supporting of url().
Added resolving for require in Pug conditional.
Added resolving for require in Pug mixin argument.
Added resolving for require in Pug each in
and in each of
iteration object.
display details verbose data for extracted CSS, images, data-URL, inline SVG, etc.
Added the filename
property to the pathData
argument of the filename(pathData)
function in entry object.
css
option name instead of the extractCss
.new PugPlugin({
modules: [
PugPlugin.extractCss({
filename: 'assets/css/[name].[contenthash].css',
}),
],
}),
Use the new syntax, since v4.6.0
:
new PugPlugin({
css: {
filename: 'assets/css/[name].[contenthash].css',
},
}),
use(href=require("./icons.svg#home"))
pretty
option is true.js.filename
option when used split chunk.css.outputPath
option.css.filename
is a function, pass the pathData.filename
property as a source file.publicPath
has auto
value.data
in loader option when the self
loader option is true in the compile
method.output.path
as path.join(__dirname, 'dist')
.output.filename
as [name].js
.exports
field.info.filename
property of postprocess() argument for pug files.link(href=require('bootstrap') rel='stylesheet')
.Published by webdiscus about 2 years ago
PugPlugin.loader.option.method
is now render
instead of compile
,method
option:{
loader: PugPlugin.loader,
options: {
method: 'compile', // now the default method is `render`
}
},
outputFile
property of the ResourceInfo
(the argument of postprocess
function) was replaced with outputPath
.postprocess
was used the outputFile
), add in your postprocess function the code line:new PugPlugin({
postprocess: (content, info) => {
const outputFile = path.join(info.outputPath, info.assetFile); // add this line to get the removed outputFile
// ...
return content;
}
}),
Published by webdiscus over 2 years ago
Drop support for Node 12
, minimum supported version is 14.18
sass-loader
13.x requires Node 14.Defaults the embedded CSS extractor module is now enabled.
For compatibility with external extractor, you can disable extractCss module:
new PugPlugin({
extractCss: {
enabled: false, // disable embedded extractCss module to bypass extracting via external plugin
},
}),
Definition of PugPlugin.extractCss
as plugin module is deprecated because this module is enabled by default.
Following definition is deprecated:
new PugPlugin({
modules: [
PugPlugin.extractCss({
filename: 'assets/css/[name].[contenthash].css',
})
],
}),
Now use the new extractCss
option to configure the embedded CSS extractor module:
new PugPlugin({
extractCss: {
filename: 'assets/css/[name].[contenthash].css',
},
}),
publicPath
extractCss
option for embedded CSS extract moduleextractCss
module is enabled with default options:escape
, :code
, :highlight
and :markdown
asset/inline
the inline SVG in HTML and data-URL for binary imagesasset/inline
the utf8 encoding for SVG data-URL in CSSasset
to automatically choose between resource
and inline
new PugPlugin()
is equivalent to:
new PugPlugin({
test: /\.(pug)$/,
enabled: true,
verbose: false,
pretty: false,
sourcePath: null,
outputPath: null,
filename: '[name].html',
extractCss: {
test: /\.(css|scss|sass|less|styl)$/,
enabled: true,
verbose: false,
filename: '[name].css',
sourcePath: null,
outputPath: null,
},
modules: [],
}),
Published by webdiscus over 2 years ago
pretty
option to format the resulting HTMLresponsive-loader
to use a result of this loader in pugcompile
method of pug-loader, now is possible pass an object contained a functionoutputPath
was relativePublished by webdiscus almost 3 years ago
webpack serve