前言
对于前端开发人员来说，现代的 Web 开发已经离不开构建工具了。而其中最常见的构建工具我们可以说是 webpack 了。webpack 具有非常多的插件，使得它可以更加强大。而本文介绍的 modernizr-loader 插件就是其中之一。本文将详细介绍 modernizr-loader 的使用方法及详解其原理。
modernizr-loader 概述
modernizr-loader 是 webpack 插件，它能够自动生成一个你网站所需要检测的特性检测代码，以除去过时浏览器的潜在问题。另外，modernizr-loader 还可以和其他 webpack 插件一起被使用，以生成一个更加优化的代码包。
安装 modernizr-loader
在开始使用 modernizr-loader 之前，你需要安装先 modernizr 和 modernizr-loader。
npm install modernizr modernizr-loader --save-dev
创建配置文件
如果你之前已经使用过 modernizr，可能已经拥有了一份 modernizr 配置文件。而如果没有，可以使用以下命令来创建一个默认版本的配置文件。
node ./node_modules/modernizr/bin/modernizr -c=my-config.json -d
这样，你就在你的项目根目录下创建了一个 my-config.json 配置文件。
配置 webpack.config.js
在 webpack.config.js 配置文件中添加以下代码。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- --------- - ---------------------
----- ---------------------- - ----------------------------
-------------- - -
-------- ----------
------ -----------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- ---------------------
---- ---------------------
--
--
--
--这个配置会添加一个新的 loader，同时匹配后缀为 .modernizrrc.js 的文件。
接着，在 my-config.json 配置文件中添加以下代码：
{
"feature-detects": [
"css/transitions",
"css/imageset",
"svg/smil"
]
}这份配置文件即表示要检测的浏览器特性列表。
使用 modernizr-loader
配置完毕之后，就可以在代码中使用了。例如，如果你希望在代码中检测是否支持动画效果，就可以像这样：
import Modernizr from 'modernizr';
if (Modernizr.cssanimations) {
// 使用动画效果
} else {
// 使用无动画效果
}这样，在生成的代码中就会自动检测是否支持 CSS 动画效果，并根据支持情况执行相应代码。
结语
本文详细介绍了 npm 包 modernizr-loader 的使用方法及原理，希望读者能够通过此文，了解并掌握其使用方法，从中获得指导及启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/184159