在前端开发中，我们常常会使用一些新的 JavaScript 特性，但是这些特性却不是所有浏览器都支持的。这时就需要使用 polyfills 来填补这些浏览器的差异。在 webpack 中，我们可以使用 webpack-polyfills-plugin 这个 npm 包来解决这个问题。本文将带你详细了解这个插件的使用方法及其指导意义。
安装 webpack-polyfills-plugin
首先，我们需要安装 webpack-polyfills-plugin。在你的项目根目录下执行以下命令：
--- ------- ------------------------ ----------
配置 webpack-polyfills-plugin
在 webpack 的配置文件中，我们需要在 plugins 配置里加入 webpack-polyfills-plugin。下面是一个基本的配置示例：
----- ------- - -------------------
----- ---------------------- - ------------------------------------
-------------- - -
------ -----------
------- -
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
------- --------------
-
-
--
-------- -
--- ------------------------
---------- -
----------------
---------
-
--
-
--在上面的配置中，我们使用了 babel-loader 来编译 ES6 代码，并在 plugins 中加入了 webpack-polyfills-plugin，并传入了我们需要使用的 polyfills。这个插件会在打包时自动将这些 polyfills 导入到打包后的代码中。
核心功能
WebpackPolyfillsPlugin 主要有两个核心功能：一是自动引入 polyfills 到打包后的代码中；二是根据浏览器的 User-Agent 动态引入 polyfills，减少不必要的代码体积。
自动引入 polyfills
当您明确知道项目需要支持的浏览器时，您可以手动指定项目所需的 polyfills，以确保代码可以在所有浏览器上运行。
--- ------------------------ ---------- ----------- ---------------- --
如上示例，我们可以在插件配置中指定需要用到的 polyfills。在打包时，webpack-polyfills-plugin 会将相应的 polyfills 自动添加到 bundle 中。通过这种方式，我们仅引入项目所需的 polyfills，而不必将所有 polyfills 都添加到 bundle 中，减少了代码体积。
动态引入 polyfills
当您希望仅对不支持某些 ECMAScript 特性的浏览器启用 polyfills 时，可以使用动态引入的方式。
您可以将此行为启用为默认选项，只需将 dyanmicImport: 选项设置为 true
--- ------------------------
---------- -
-
---- ----------------------------------------------------------
----- --------- -- -------
-- ----- ------- --- -------- ------------------
-------- ----- ------ ------------ -- -
---------------
-
-
--
-------------- -----
--如上示例，我们指定了要动态导入的 polyfill 的 url，同时还指定了一个 test 条件。如果条件为 true，则这个 polyfill 会被导入。在实际构建过程中，浏览器的 User-Agent 将会被用于判断是否需要导入 polyfills。
示例代码
完整的代码示例可查看 webpack-polyfills-plugin-demo。
总结
使用 webpack-polyfills-plugin，可以帮助我们在 webpack 中自动引入所需的 polyfills，以兼容所有浏览器。这是前端开发中必不可少的一个工具。通过本文的介绍，你可以了解到该插件的用法及其在实际项目中的应用，希望能给读者带来帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f215587403f2923b035c69e