A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/steadyapp/html-webpack-link-type-plugin below:

localyost3000/html-webpack-link-type-plugin: a plugin for html-webpack-plugin to allow for mimetype tagging of injected links

Html Webpack Link Type Plugin

Assigns a mimetype to link tags injected by Html Webpack Plugin

  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',
    };

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 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.


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4