Security News
Opengrep Emerges as Open Source Alternative Amid Semgrep Licensing Controversy
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
pug-plugin
Advanced tools
Pug plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in Pug.
The Pug Plugin generates static HTML or template function from Pug template containing source files of scripts, styles, images, fonts and other resources, similar to how it works in Vite.
script
and style
source files directly in Pug:
link(href="./style.scss" rel="stylesheet")
script(src="./app.tsx" defer="defer")
href
src
srcset
etc. using relative path or alias:
link(href="../images/favicon.svg" type="image/svg" rel=icon)
img(src="@images/pic.png" srcset="@images/pic400.png 1x, @images/pic800.png 2x")
link
and script
tags.:escape
:code
:highlight
:markdown
.See the full list of features.
Note
‼️ All features and options of the html-bundler-webpack-plugin available now in the
pug-plugin
too.
Warning
Since the version
5.0.0
, the Pug plugin is essentially the html-bundler-webpack-plugin preconfigured for using Pug templates.
Warning
Compared to the version
4.x
, in the new version5.x
the source asset file can be specified in a template without therequire()
function. For compatibility, therequire()
function is still supported.//- OLD syntax: the path is relative to the partial file or can be as the webpack alias link(href=require("./style.scss") rel="stylesheet") //- NEW syntax: the path is relative to the entry file or can be as the webpack alias link(href="./style.scss" rel="stylesheet")
See the full list of the BREAKING CHANGES in v5.
Install the pug-plugin
:
npm install pug-plugin --save-dev
Install additional packages for styles:
npm install css-loader sass sass-loader --save-dev
For example, there is the Pug template with source asset files ./src/views/index.pug:
html
head
//- relative path to SCSS source file
link(href="../scss/style.scss" rel="stylesheet")
//- relative path to TypeScript source file
script(src="../app/main.js" defer="defer")
body
h1 Hello World!
//- relative path to image source file
img(src="../assets/images/picture1.png")
//- Webpack alias as path (src/assets/images/) to image source file
img(src="@images/picture2.png")
The minimal webpack config:
const PugPlugin = require('PugPlugin');
module.exports = {
plugins: [
new PugPlugin({
entry: {
// define many page templates here
index: 'src/views/index.pug', // => dist/index.html
},
js: {
// JS output filename
filename: 'js/[name].[contenthash:8].js',
},
css: {
// CSS output filename
filename: 'css/[name].[contenthash:8].css',
},
}),
],
module: {
rules: [
{
test: /\.(s?css|sass)$/,
use: ['css-loader', 'sass-loader'],
},
{
test: /\.(ico|png|jp?g|webp|svg)$/,
type: 'asset/resource',
generator: {
filename: 'img/[name].[hash:8][ext][query]',
},
},
],
},
};
Warning
No additional pug or html loaders required.
The generated HTML contains URLs of the output filenames:
<html>
<head>
<link href="css/style.05e4dd86.css" rel="stylesheet" />
<script src="js/main.f4b855d8.js" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
<img src="img/picture1.58b43bd8.png" />
<img src="img/picture2.bd858b43.png" />
</body>
</html>
Why the Pug Plugin since v5.0
based on html-bundler-webpack-plugin?
2021
The history of the creation of the pug-plugin
began back in October 2021.
Then, at the end of 2021, I created the @webdiscus/pug-loader that had all the features of the original pug-loader.
2022
Using, then without an alternative, html-webpack-plugin
caused me pain and suffering to configure webpack for rendering Pug templates containing various assets.
At the beginning of 2022, I started creating the pug-plugin
as a complete replacement for the html-webpack-plugin
and many other "crutches".
During of the year, the pug-plugin
acquired a lot of useful features and was able to replace the html-webpack-plugin
, mini-css-extract-plugin
and many other plugins and loaders.
2023
Based on the pug-plugin
code, I decided to create a universal html-bundler-webpack-plugin that would support all major template engines, such as Eta, EJS, Handlebars, Nunjucks, Pug, TwigJS, and would be expandable for other template engines, e.g., LiquidJS.
During 2023, this plugin acquired an even greater number of useful features and absorbed all the functionality of the pug-plugin
and the @webdiscus/pug-loader
.
2024
Therefore, at the beginning of 2024, it was decided to completely switch to the universal html-bundler-webpack-plugin
code.
Starting from version 5.0
, the pug-plugin
is the html-bundler-webpack-plugin
pre-configured for Pug template with the pre-installed pug
package.
The config of pug-plugin >= v5.0
:
const PugPlugin = require('pug-plugin');
module.exports = {
plugins: [
new PugPlugin({
entry: {
index: 'src/views/home.pug',
},
}),
],
};
is the same as:
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
plugins: [
new HtmlBundlerPlugin({
entry: {
index: 'src/views/home.pug',
},
preprocessor: 'pug', // <= enable using Pug templating engine
}),
],
};
The
pug-plugin
's heart 🧡 now lives in thehtml-bundler-webpack-plugin
's body 🏋️♂️.
@webdiscus/pug-loader
->pug-plugin
->html-bundler-webpack-plugin
->pug-plugin
5.0.0 (2024-02-08)
Note
The
pug-plugin
since the version5.0.0
has completely new code based on the html-bundler-webpack-plugin version3.5.5
.The new version have many many new cool features, but contains some
BREAKING CHANGES
.
The Pug loader should not be defined in the module.rules
anymore.
The plugin add the pug loader automatically.
Please remove the PugPlugin.loader
from the config:
module.exports = {
mode: 'production',
output: {
path: path.join(__dirname, 'dist/'),
},
entry: {
index: './src/index.pug',
},
plugins: [
new PugPlugin(),
],
module: {
rules: [
- {
- test: /\.pug$/,
- loader: PugPlugin.loader,
- },
],
},
};
Only if you need to define the Pug options then use the new preprocessorOptions
plugin option:
module.exports = {
plugins: [
new PugPlugin({
+ preprocessorOptions: {
+ basedir: path: path.join(__dirname, 'src/'),
+ }
}),
],
};
modules
optionThe modules
option is removed. Use the plugin js and css options.
Instead of the modules.test
option you can use following:
See new plugin options.
JS code can be inlined using the js.inline: true
option or using the ?ìnline
query:
//- OLD syntax
- script=require('./main.js?inline')
//- NEW syntax
+ script(src='./main.js?inline')
CSS code can be inlined using the css.inline: true
option or using the ?ìnline
query:
//- OLD syntax
- style=require('./style.css?inline' rel='stylesheet')
//- NEW syntax
+ link(href='./style.css?inline' rel='stylesheet')
The require() function in srcset attribute works anymore.
//- OLD syntax
Note: the required file is relative to the current pug partial file, recommends to use an webpack alias
- img(srcset=`${require('./image1.png')} 400w, ${require('@images/image2.png')} 800w` src=require('./image.png'))
//- NEW syntax
Note: the file is relative to the main entrypoint pug file, recommends to use an webpack alias
+ img(srcset=`./image1.png 400w, @images/image2.png 800w` src='./image.png')
FAQs
Pug plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in Pug.
The npm package pug-plugin receives a total of 1,433 weekly downloads. As such, pug-plugin popularity was classified as popular.
We found that pug-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.