@pointotech/detect-browser-feature-webp v2.0.2
@pointotech/detect-browser-feature-webp
Detects browser support for WebP images.
WebP was invented by Google. This implementation is based on Google's official recommendations for WebP browser support detection.
Installation
Yarn installation
yarn add @pointotech/detect-browser-feature-webp
NPM installation
npm install @pointotech/detect-browser-feature-webp
Usage
import { detectBrowserFeatureWebp } from "@pointotech/detect-browser-feature-webp"
const isWebpSupported = await detectBrowserFeatureWebp()
if (isWebpSupported) {
console.log("This browser supports WebP images.")
} else {
console.log("This browser does NOT support WebP images.")
}
Webpack configuration
This library ships as plain TypeScript code. Apps that compile their code into JavaScript for the browser will need to include this library's code in the compilation process. Because most libraries ship as precompiled JavaScript code, the node_modules
directory (and therefore this library) is excluded from the compilation process in a typical Webpack configuration.
Here's an example of how to include this library's code in the compilation process, while continuing to exclude other (presumably precompiled) libraries:
// webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: "ts-loader",
options: {
allowTsInNodeModules: true,
configFile: "tsconfig.webpack.json",
},
},
],
exclude:
/node_modules\/(?![@pointotech\/detect\-browser\-feature\-webp])/,
},
],
},
//...
}
This example only applies to Webpack, and is only meant to show how to include a subset of node_modules
in the compilation process when it would otherwise be ignored by the compiler. This is not a full example of a Webpack configuration file, and setting up Webpack is beyond the scope of this document.