html-webpack-link-script-type-plugin
v1.1.2
Published
a plugin for html-webpack-plugin to allow for mimetype tagging of injected links
Downloads
2
Maintainers
Readme
Html Webpack Link Type Plugin
Assigns a mimetype to link tags injected by Html Webpack Plugin
Configuration
- Install via
npm i -D html-webpack-link-type-plugin
- 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.