feat: update html-bundler-webpack-plugin to v3.14 containing many fea…

…tures and fixes
webdiscus · May 31, 2024 · 9229a21 · 9229a21
1 parent 74ef323
commit 9229a21
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,59 @@
 # Change log
 
+## 5.3.0 (2024-05-31)
+
+- chore: update html-bundler-webpack-plugin
+- feat: add `watchFiles.includes` and `watchFiles.excludes` options to allow watch specifically external file,
+  e.g. *.md file included via Pug filter from any location outer project directory
+- feat: add resolving the url() value in the style attribute:
+  ```pug
+  div(style="background-image: url(./image.png);")
+  ```
+- feat: add support for the `css-loader` option `exportType` as [css-style-sheet](https://github.com/webpack-contrib/css-loader?#exporttype)
+- feat: add `entryFilter` option to include or exclude entry files when the `entry` option is the path
+- feat: add support the [CSS Modules](https://github.com/css-modules/css-modules) for styles imported in JS using the [css-loader modules](https://github.com/webpack-contrib/css-loader#modules) option.\
+  Required: `css-loader` >= `7.0.0`\
+  The CSS _module rule_ in the webpack config:
+  ```js
+  {
+    test: /\.(css)$/,
+    use: [
+      {
+        loader: 'css-loader',
+        options: {
+          modules: {
+            localIdentName: '[name]__[local]__[hash:base64:5]',
+            exportLocalsConvention: 'camelCase',
+          },
+        },
+      },
+    ],
+  },
+  ```
+  CSS:
+  ```css
+  .red {
+    color: red;
+  }
+  .green {
+    color: green;
+  }
+  ```
+  Using in JS:
+  ```js
+  // the styles contains CSS class names: { red: 'main__red__us4Tv', green: 'main__green__bcpRp' }
+  import styles from './main.css';
+  ```
+
+- feat: add support for dynamic import of styles
+  ```
+  const loadStyles = () => import('./component.scss');
+  loadStyles();
+  ```
+- fix: issue when used js dynamic import with magic comments /* webpackPrefetch: true */ and css.inline=true
+- fix: ansi colors for verbose output in some terminals  
+- fix: extract CSS from styles imported in dynamically imported JS
+
 ## 5.2.0 (2024-04-06)
 
 - feat: add experimental (undocumented) syntax to include (using `?include` query) compiled CSS directly into style tag to allow keep tag attributes

diff --git a/README.md b/README.md
@@ -24,6 +24,13 @@
 ## Pug template as entry point
 
 The **Pug Plugin** generates static HTML or [template function](https://github.com/webdiscus/html-bundler-webpack-plugin#template-in-js) from **Pug template** containing source files of scripts, styles, images, fonts and other resources, similar to how it works in [Vite](https://vitejs.dev/guide/#index-html-and-project-root).
+This plugin allows using a template file as an [entry point](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry).
+
+The plugin resolves source files of assets in templates and replaces them with correct output URLs in the generated HTML.
+The resolved assets will be processed via Webpack plugins/loaders and placed into the output directory.
+You can use a relative path or Webpack alias to a source file.
+
+A template imported in JS will be compiled into [template function](https://github.com/webdiscus/html-bundler-webpack-plugin#template-in-js). You can use the **template function** in JS to render the template with variables in runtime on the client-side in the browser.
 
 ## 💡 Highlights
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pug-plugin",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Pug plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in Pug.",
   "keywords": [
     "html",
@@ -67,9 +67,9 @@
   },
   "dependencies": {
     "ansis": "2.0.3",
-    "html-bundler-webpack-plugin": "3.8.0",
+    "html-bundler-webpack-plugin": "3.14.0",
     "js-beautify": "^1.15.1",
-    "pug": "3.0.2"
+    "pug": "3.0.3"
   },
   "devDependencies": {
     "@babel/core": "7.24.4",