Skip to content
a plugin for html-webpack-plugin to allow for mimetype tagging of injected links
TypeScript HTML Other
Branch: develop
Clone or download
Latest commit 9d4a014 Jul 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
spec
src fix removed scripts, and add test for future Oct 10, 2018
.gitignore v1.0.3 pre-release May 7, 2019
.npmignore first version, bare bones Sep 18, 2018
.travis.yml move build to new ownership Jul 24, 2019
CHANGELOG.md v1.0.3 pre-release May 7, 2019
LICENSE
README.MD Add notes about webpack in production mode May 3, 2019
package-lock.json v1.0.3 pre-release May 7, 2019
package.json
tsconfig.json first version, bare bones Sep 18, 2018

README.MD

Html Webpack Link Type Plugin

Assigns a mimetype to link tags injected by Html Webpack Plugin

Configuration

  1. Install via npm i -D html-webpack-link-type-plugin
  2. Add to your webpack config AFTER HtmlWebpackPlugin
    var LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;
    ...
    plugins: [
        new HtmlWebpackPlugin({
            filename: join(OUTPUT_DIR, './dist/index.html'),
            hash: false,
            inject: 'body',
            minify: minifyOptions,
            showErrors: false
            template: join(__dirname, './src/index.html'),
        }),
        new LinkTypePlugin(options)
    ]

The plugin supports one optional configuration argument, called typeMap. It is an override to the default mapping of file globs (provided via minimatch). The default mapping is:

    {
        '*.css' : 'text/css',
        '*.js'  : 'text/javascript',
        '*.png' : 'image/png',
        '*.jpg' : 'image/jpeg',
        '*.jpeg': 'image/jpeg',
        '*.gif' : 'image/gif',
        '*.webp': 'image/webp',
        '*.bmp' : 'image/bmp',
    };

Notes

By default, HTMLWebpackPlugin automatically applies certain optimizations in production mode. Some of these optimizations may remove type attributes in injected links.

To prevent this, you will need to pass your own options to HTMLWebpackPlugin's minify property, making sure to omit removeStyleLinkTypeAttributes and removeScriptTypeAttributes. Starting from HTMLWebpackPlugin's default minify options, that might look like this:

plugins: [
        new HtmlWebpackPlugin({
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                useShortDoctype: true
            }
        }),
    ]

Testing

Testing is done via ts-node and mocha. Test files can be found in /spec, and will be auto-discovered as long as the file ends in .spec.ts. Just run npm test after installing to see the tests run.

You can’t perform that action at this time.