html-webpack-link-type-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    Html Webpack Link Type Plugin

    FOSSA Status

    build-plugin

    NPM

    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.

    License

    FOSSA Status

    Install

    npm i html-webpack-link-type-plugin

    DownloadsWeekly Downloads

    1,239

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    10.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • swimmadude66