前言
在前端开发中，我们常常需要检测浏览器是否支持某些新特性。虽然我们可以通过判断浏览器的 user-agent 来实现这一功能，但是这种方式并不十分准确，因为不同浏览器的 user-agent 不尽相同，而且可能会被伪造。因此，我们需要一种更加可靠的方法来检测浏览器支持的特性。
在这种情况下，现代化检测工具 Modernizr 就派上了用场。Modernizr 是一个开源的 JavaScript 库，用于检测浏览器支持的 HTML、CSS 和 JavaScript 特性。它由一系列特性检测的 JavaScript 脚本构成，可以为我们自动检测浏览器的支持情况，从而帮助我们在开发过程中更好地处理浏览器的兼容性问题。
在本文中，我们将介绍如何使用 npm 包 modernizr-webpack-plugin 将 Modernizr 库集成到 webpack 构建中，从而更加自动化和方便地使用 Modernizr。
安装
要集成 modernizr-webpack-plugin，首先需要安装它。我们可以通过 npm 在项目根目录中执行以下命令来安装 modernizr-webpack-plugin：
npm install modernizr-webpack-plugin --save-dev
配置
安装完成之后，我们需要在 webpack 配置文件中引入并配置 modernizr-webpack-plugin。在这里，我们假设你已经熟悉了 webpack 的基本配置方法。
首先，在 webpack 配置文件中引入 modernizr-webpack-plugin：
const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');然后，在配置的 plugins 中添加 ModernizrWebpackPlugin：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
-- ---
--- ------------------------
---------------- -
-- ------------
-
--
-
--在这里，我们传入了一个包含 feature-detects 属性的配置对象。这个属性需要我们传入一个特性列表，其中包含了需要检测的特性。例如，我们可以将以下特性作为一个简单的示例传入：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
-- ---
--- ------------------------
---------------- -
--------------
--------------
----------------
--------------
-
--
-
--这个特性列表包含了四个特性：
- css/filters 用于检测浏览器是否支持 CSS 的 filter 属性
- css/flexbox 用于检测浏览器是否支持 CSS 的 flexbox 布局
- css/variables 用于检测浏览器是否支持 CSS 变量
- es6/promises 用于检测浏览器是否支持 ES6 Promise
你可以根据实际需要将这个列表进行修改或扩展。
使用
当配置完成后，我们就可以在 webpack 构建中使用 Modernizr 检测浏览器支持的特性了。
在 webpack 4.x 版本中，Modernizr 会自动生成一个名为 modernizr.min.js 的文件，我们可以在其他 JavaScript 文件中引入该文件，并使用 Modernizr 对象来检测浏览器对特性的支持情况。
例如，在我们的 JavaScript 文件中，可以通过如下方式来检测浏览器是否支持 CSS 的 filter 属性：
if (Modernizr.cssfilters) {
// 浏览器支持 CSS 的 filter 属性
} else {
// 浏览器不支持 CSS 的 filter 属性
}如果我们需要在 CSS 中使用 Modernizr 检测的特性，可以通过如下方式来引入 modernizr.min.js 文件：
@import url('/path/to/modernizr.min.css');在引入 modernizr.min.css 之后，我们就可以在 CSS 文件中使用类似如下的语法来检测特性是否被支持：
-- -------------------- ---- -------
-- ------ --- -- --
----- -
-------- ----
-
--------- ------- ---------- -
-- ----- --- -- --
----- -
-------- -----
-
-总结
通过这篇文章，我们介绍了如何使用 npm 包 modernizr-webpack-plugin 将 Modernizr 库集成到 webpack 构建中，从而更加自动化和方便地使用 Modernizr。我们首先安装了 modernizr-webpack-plugin，然后在 webpack 配置文件中进行了配置，从而将需要检测的浏览器特性传递给了 Modernizr。最后，我们演示了在 JavaScript 文件和 CSS 文件中如何使用 Modernizr 来检测浏览器支持的特性。希望通过这篇文章能够帮助您更加方便地应对前端开发过程中的浏览器兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71660