+
+
+```
+
+If the `entry` plugin option is a path, the plugin finds all templates automatically
+and keep the same directory structure in the output directory.
+
+If the `entry` plugin option is an object, the key is an output filename without `.html` extension and the value is a template file.
+
+Very simple and clear **webpack.config.js**, all relevant settings are in one place, in plugin options:
```js
const path = require('path');
@@ -166,26 +174,30 @@ module.exports = {
path: path.join(__dirname, 'dist/'),
},
- entry: {
- // The Pug file is the entry-point for all scripts and styles.
- // Source scripts and styles must be specified directly in Pug.
- // Do not need to define JS and SCSS in the webpack entry.
-
- index: './src/views/index.pug', // output dist/index.html
- about: './src/views/about/index.pug' // output dist/about.html
- // ...
- },
-
plugins: [
- // enable processing of Pug files defined in webpack entry
new PugPlugin({
+ // automatically processing all templates in the path
+ entry: 'src/views/',
+ // - OR - define many pages manually (key is output filename w/o `.html`)
+ entry: {
+ // simple page config w/o variables
+ index: 'src/views/home.pug', // => dist/index.html
+ // advanced page config with variables
+ 'news/sport': { // => dist/news/sport.html
+ import: 'src/views/news/sport/index.pug', // template file
+ data: { title: 'Sport news' }, // pass variables into template
+ },
+ },
+ data: {...}, // pass global data into all templates
js: {
- // output filename of extracted JS file from source script defined in Pug
- filename: 'assets/js/[name].[contenthash:8].js',
+ // JS output filename, used if `inline` option is false (defaults)
+ filename: 'js/[name].[contenthash:8].js',
+ //inline: true, // inlines JS into HTML
},
css: {
- // output filename of extracted CSS file from source style defined in Pug
- filename: 'assets/css/[name].[contenthash:8].css',
+ // CSS output filename, used if `inline` option is false (defaults)
+ filename: 'css/[name].[contenthash:8].css',
+ //inline: true, // inlines CSS into HTML
},
})
],
@@ -193,55 +205,142 @@ module.exports = {
module: {
rules: [
{
- test: /\.pug$/,
- loader: PugPlugin.loader, // PugPlugin already contain the pug-loader
+ test: /\.(s?css|sass)$/,
+ use: ['css-loader', 'sass-loader']
},
{
- test: /\.(css|sass|scss)$/,
- use: ['css-loader', 'sass-loader']
+ test: /\.(ico|png|jp?g|webp|svg)$/,
+ type: 'asset/resource',
+ generator: {
+ filename: 'img/[name].[hash:8][ext][query]',
+ },
},
],
},
};
```
+> **Note**
+>
+> No additional plugins oder loader required.
+
+Watch of dependencies
p Pug codep Hello Pug!console.log('file.js');
+console.log('file.mjs');console.log('file.jsx');
+console.log('file.ts');console.log('file.tsx');
+{
+ "type": "JSON"
+}// main.c
+#include <stdio.h>
+#include <stdlib.h>
+/* CSS */
+h1 {
+ color: red;
+}// SCSS
+h1 {
+ color: #C21F39;
+}// styles.scss
+//@use 'github-markdown-css';
+@use 'prismjs';
+
+body {
+ font-family: sans-serif;
+ font-size: 14px;
+ margin: 0;
+}
+
+h1 {
+ color: darkcyan;
+}
+
+.content {
+ margin: 32px;
+}
+
+.container {
+ margin-top: 32px;
+ margin-bottom: 32px;
+}
+Markdown
+File: markdown.md
+Italic
+Bold
+H2 markdown
+H2 HTML tag
+Highlight HTML code in markdown: <span>span tag</span>
+++Note
+This is a note.
+
++Warning
+This is a warning.
+
\ No newline at end of file
diff --git a/test/cases/html-webpack-plugin/expected/css/about.ae0c9a91.css b/test/cases/html-webpack-plugin/expected/css/about.ae0c9a91.css
new file mode 100644
index 0000000..dc4777e
--- /dev/null
+++ b/test/cases/html-webpack-plugin/expected/css/about.ae0c9a91.css
@@ -0,0 +1 @@
+h1{color:#2e8b57}
diff --git a/test/cases/html-webpack-plugin/expected/css/index.7c137e55.css b/test/cases/html-webpack-plugin/expected/css/index.7c137e55.css
new file mode 100644
index 0000000..7a90066
--- /dev/null
+++ b/test/cases/html-webpack-plugin/expected/css/index.7c137e55.css
@@ -0,0 +1 @@
+h1{color:#ff4500}
diff --git a/test/cases/html-webpack-plugin/expected/img/favicon.edda23bf.ico b/test/cases/html-webpack-plugin/expected/img/favicon.edda23bf.ico
new file mode 100644
index 0000000..0eb2816
Binary files /dev/null and b/test/cases/html-webpack-plugin/expected/img/favicon.edda23bf.ico differ
diff --git a/test/cases/option-method-html-js/expected/assets/images/image.697ef306.png b/test/cases/html-webpack-plugin/expected/img/picture.697ef306.png
similarity index 100%
rename from test/cases/option-method-html-js/expected/assets/images/image.697ef306.png
rename to test/cases/html-webpack-plugin/expected/img/picture.697ef306.png
diff --git a/test/cases/html-webpack-plugin/expected/index.html b/test/cases/html-webpack-plugin/expected/index.html
new file mode 100644
index 0000000..0ee0183
--- /dev/null
+++ b/test/cases/html-webpack-plugin/expected/index.html
@@ -0,0 +1 @@
+