Merge pull request #11 from drolsen/dev

Dev 1.2.5 Release
drolsen · Jan 17, 2022 · c9816af · c9816af
2 parents 417f7ae + 5e94738
commit c9816af
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ No, you should checkout https://github.com/jantimon/favicons-webpack-plugin for
 
 
 ### How does it works
-By tapping into the Webpack5's latest hook updates, WebackFavicon digs into the build to search for any instances of HTML file assets.
+By tapping into the Webpack 5's latest hook updates, WebackFavicon digs into the build to search for any instances of HTML file assets.
 While doing that, it leverages the favicon (https://github.com/itgalaxy/favicons) module to generate configured favicons off your provided source file.
 
 Once everything is done, you have device and browser specific generated favicons from a single source and any / all HTML files now have corresponding link tags now injected.
@@ -35,17 +35,45 @@ yarn add --dev webpack-favicons
 const WebpackFavicons = require('webpack-favicons');
 ```
 Instantiate a `new WebpackFavicons()` class within Webpack configuration's plugin array:
+
 ```js
+
+// Basic configuration
+
 module.exports = {
-  "plugins": [
+  output: {
+    path: '/dist', 
+    publicPath: '/~media/'
+  }  
+  plugins: [
     new WebpackFavicons({
-      src: 'path/to/favicon.svg'
+      src: 'assets/favicon.svg',
+      path: 'img',
+      background: '#000',
+      theme_color: '#000',
+      icons: {
+        favicons: true,
+      }
     })
   ]
 };
 ```
-Recommended that your source favicon file be a SVG vector file. This allow for best possible quality of generated pixel based favicons.
 
+Will result in file being written to:
+- /dist/img/favicon.ico
+- /dist/img/favicon16x16.png 
+- /dist/img/favicon32x32.png
+- /dist/img/favicon48x48.png
+
+While our HTML file will have paths to favicons as:
+```html
+<link rel="shortcut icon" href="/~media/img/favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="/~media/img/favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/~media/img/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="48x48" href="/~media/img/favicon-48x48.png">
+```
+
+It is recommended that your source favicon file be a SVG vector file to allow best possible quality to generated pixel based favicons from.
 
 
 ## Options
@@ -56,7 +84,7 @@ For much more information about these options please visit: https://github.com/i
 Option | Type | Description
 --- | --- | ---
 `src` | String | Path to the source favicon file which all favicons will be generated from
-`path` | String | Path for overriding default icons path.
+`path` | String | Path to where icons get written (is relative to webpack's `output.path`)
 `appName` | String | Your application's name.
 `appShortName` | String | Your application's short_name. (Optional. If not set, appName will be used)
 `appDescription` | String | Your application's description.
@@ -77,6 +105,7 @@ Option | Type | Description
 `loadManifestWithCredentials` | Boolean | Browsers don't send cookies when fetching a manifest, enable this to fix that.
 `icons` | Object | See below for more details about this object's options.
 
+
 ## Icon Object's Options
 Option | Type | Description
 --- | --- | ---

diff --git a/index.js b/index.js
@@ -1,4 +1,5 @@
 const fs = require('fs');
+const path = require('path');
 const favicons = require('favicons');
 
 class WebpackFavicons {
@@ -75,7 +76,9 @@ class WebpackFavicons {
                     let HTML = assets[i]._value.toString();
 
                     if (compiler.options.output.publicPath !== 'auto') {
-                      this.html = this.html.replace(/href="/g, `href="${compiler.options.output.publicPath}`);
+                      this.html = this.html.replace(/href="(.*?)"/g, (match, p1, string) => {
+                        return `href="${path.normalize(`${compiler.options.output.publicPath}/${p1}`)}"`.replace(/\\/g, '/')
+                      });
                     }
 
                     assets[i]._value = HTML.replace(
@@ -103,7 +106,7 @@ class WebpackFavicons {
             if (this.images) {
               Object.keys(this.images).map((i) => {
                 let image = this.images[i];
-                assets[`${this.options.path}${image.name}`] = {
+                assets[path.normalize(`\/${this.options.path}/${image.name}`)] = {
                   source: () => image.contents,
                   size: () => image.contents.length
                 };
@@ -114,7 +117,7 @@ class WebpackFavicons {
             if (this.files) {
               Object.keys(this.files).map((i) => {
                 let file = this.files[i];
-                assets[`${this.options.path}${file.name}`] = {
+                assets[path.normalize(`\/${this.options.path}/${file.name}`)] = {
                   source: () => file.contents,
                   size: () => file.contents.length
                 };

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "webpack html favicon",
     "webpack favicons"
   ],
-  "version": "1.2.0",
+  "version": "1.2.5",
   "description": "Webpack plugin to generate favicons for devices and browsers",
   "repository": "drolsen/webpack-favicons",
   "bugs": {
@@ -21,6 +21,7 @@
     "basic-test": "webpack --config ./test/basic.config.js --mode production",
     "nested-test": "webpack --config ./test/nested.config.js --mode production",
     "public-test": "webpack --config ./test/public-path.config.js --mode production",
+    "mixed-test": "webpack --config ./test/mixed-path.config.js --mode production",
     "ava-test": "ava ./test/ava.test.js"
   },
   "engines": {

diff --git a/test/mixed-path.config.js b/test/mixed-path.config.js
@@ -0,0 +1,60 @@
+const WebpackFavicons = require('../index.js');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+  entry: path.resolve(__dirname, 'test.js'),
+  output: {
+    path: path.resolve(__dirname, '../dist/mixed'), 
+    publicPath: '/~media/',
+    filename: 'test.js',
+    pathinfo: false
+  },
+  module: {
+    rules: [{
+      'test': /\.html$/,
+      'exclude': /node_modules/,
+      'include': [
+        path.resolve(__dirname, 'test.html')
+      ],
+      'use': {
+        'loader': 'html-loader', // (see: https://www.npmjs.com/package/html-loader)
+        'options': { 'minimize': false }
+      }
+    }]
+  },
+  optimization: {
+    minimize: false
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+      'cleanOnceBeforeBuildPatterns': [path.resolve(__dirname, '../dist/mixed')]
+    }),
+    new HtmlWebpackPlugin({
+      'title': 'Basic Test',
+      'template': './test/test.html',
+      'filename': './test.html',
+      'minify': false
+    }),
+    new WebpackFavicons({
+      'src': 'assets/favicon.svg',
+      'path': 'assets',
+      'background': '#000',
+      'theme_color': '#000',
+      'icons': {
+        'android': false,
+        'appleIcon': false,
+        'appleStartup': false,
+        'coast': false,
+        'favicons': true,
+        'firefox': false,
+        'opengraph': false,
+        'twitter': false,
+        'yandex': false,
+        'windows': false
+      }
+    })  
+  ]
+};
+