Skip to content

CodeCoupler Webpack Static Files, Favicons & Manifest

Most files within the folder static will be copied to the build result in the dist folder. Here is the best place to write your demo or test pages or add other static assets. Some of these files will be used for special generators.

The subfolder inc will be ignored and not copied by default. You can control this behaviour in staticparser.keepIncSource (see Configuration Reference).

Note: The perfomance hints of webpack will be disabled for all files that will be copied from the dist folder.

Note: In the static folder you will find an file named index.html. If you delete this file and no other HTML file will is left, a default index.html file will be created in you dist folder.

The following files will be processed in a special way:

HTML Files

HTML files in this directory will be parsed and links to your bundled JavaScript files, bundled Stylesheet files, your externalized libraries and the links to the generated favicons will be injected as script and link tags. Furthermore the resulting HTML will be minified.

What HTML files exactly will be parsed is defined in staticParser.htmlTemplates (see Configuration Reference). By default all *.html files, except inside of the folder inc, will be parsed.

The tags will be placed in the head and body section. If you need to place them in other positions you must disable the inject feature in the staticParser.htmlInject (see Configuration Reference) and use the following placeholders:

1
2
<%- htmlWebpackPlugin.tags.headTags %>
<%- htmlWebpackPlugin.tags.bodyTags %>

You can include parts from other files with:

1
<%- include inc/part.html %>

Favicons

By default the file favicon.png 3 from the static folder will be converted in all possible favorite icons formats (android, appleIcon, appleStartup, coast, favicons, firefox, windows, yandex) and saved in a subdirectory named manifest 1. The necessary HTML will be injected into the HTML files (see above).

You can adjust the name of the file in staticParser.favicon (see Configuration Reference) or disable this feature complete if you set the field to null.

By default the source favicon file will not 2 be copied to the dist folder. You can control this behaviour in staticparser.keepFaviconSource (see Configuration Reference).

Web Manifest

In addition, a manifest file is created in which all generated favicons are already linked. Many other informations will be retreived from the package.json.

The individual values ​​can be overwritten in the file dist/manifest.webmanifest file and some properties can also be defined in the configuration plugins.FaviconWebpackPlugin.favicons (see Configuration Reference).

By default the manifest override file will not be copied to the dist folder. You can controll this behaviour in staticparser.keepManifestSource (see Configuration Reference).

It is recommended to set at least the following parameters in one of the two places:

webpack.cc-config.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
module.exports = {
  plugins: {
    FaviconsWebpackPlugin: {
      favicons: {
        appName: "The Aplication Name",
        appDescription: "The Application Description"
      }
    }
  },
};

dist/manifest.webmanifest:

1
2
3
4
{
  "name": "The Aplication Name",
  "description": "The Aplication Description",
}

  1. Till 3.2.2 the default name of the folder was favicon ↩

  2. Till 3.2.2 the default behaviuor was to copy the favicon source file ↩

  3. Till 3.2.2 the name of the file have to be "logo.png" ↩