在进行前端开发时，可能会遇到项目兼容性问题，因为不同版本的浏览器支持不同的JavaScript语言特性。此时我们可以通过使用 core-js-webpack3-plugin 这个npm包来解决这个问题。
什么是 core-js-webpack3-plugin?
core-js-webpack3-plugin 是一个Webpack插件，它将core-js polyfills集成到你的项目里，让你可以使用ES6和ES7的新特性，而不用担心兼容性问题。
core-js 是一个大型的JavaScript库，它通过提供对各种JavaScript新语言特性的支持 polyfills，使得让我们可以在旧版本的浏览器中使用最新的JavaScript API和语法。
安装
在使用之前，我们需要先安装这个插件。可以通过 NPM 安装：
npm install --save-dev core-js-webpack3-plugin
使用
安装完成后，我们需要在 Webpack 配置文件中进行配置，确保我们的core-js polyfills会被包含进入最终的构建文件。
首先，在 Webpack 配置文件中导入core-js-webpack3-plugin：
const CoreJSWebpackPlugin = require('core-js-webpack3-plugin')然后，将它添加到 Webpack 的配置中：
module.exports = {
// ...
plugins: [
new CoreJSWebpackPlugin()
]
}配置选项
core-js-webpack3-plugin 支持一些配置选项，可以根据项目的需要进行配置。
polyfills
polyfills 选项是一个数组，可以指定要包含的 polyfill 列表。它的值应该是 core-js 的‘明确引入方法’（Explicit import method）。下面是一个例子，指定要包含的两个 polyfill：
new CoreJSWebpackPlugin({
polyfills: [
'Promise',
'fetch'
]
})在使用polyfills选项时，需要注意避免加载不需要的polyfill而引起性能消耗。如果不是绝对需要，建议不要随意添加。
exclude
exclude 选项是一个正则表达式或字符串数组，可以指定要从包中排除的模块。例如，以下配置将从插件的核心模块中排除字符模块：
new CoreJSWebpackPlugin({
exclude: /core-js\/modules\/es\.string/
})reproducible
reproducible 选项是一个布尔值，用于设置生成的chunk和hash的不可变性。默认情况下，这个选项会被设置为 false， 当 false 的时候 chunk 的生成可能会受Minification或者其他运行环境的因素而产生变化。但是当 true 时，在不同的构建环境下生成的chunk和hash将是不变的：
new CoreJSWebpackPlugin({
reproducible: true
})useDefaultPolyfillsProvider
useDefaultPolyfillsProvider 选项是一个布尔值，用于启用或禁用默认的 polyfills 提供程序。默认情况下，这个选项会被设置为 false。如果设置为 true，它将启用默认的 polyfill 提供程序。下面是例子：
new CoreJSWebpackPlugin({
useDefaultPolyfillsProvider: true
})设置了这个选项后，插件将提供一个polyfills列表给Webpack配置，这些polyfills用于控制Web应用程序的兼容性。当Webpack配置文件中没有显式指定polyfills时会启用这些polyfills，如果指定了polyfills，那么该选项将被覆盖。
示例
下面是一个完整的 Webpack 配置文件的例子：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------------------- - ----------------------------------
-------------- - -
------ -
---- ----------------
--
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
--
-------- -
--- ---------------------
-
-在这个例子中，我们通过 require('core-js-webpack3-plugin') 导入了core-js-webpack3-plugin 模块，然后把它作为一个plugin添加到Webpack的配置中。
结论
core-js-webpack3-plugin 让我们能够在最新版本的浏览器和旧版本的浏览器上使用最新的 ES6 和 ES7 特性，同时保证兼容性。使用它可以减少兼容性问题和浏览器失败的发生率，从而提高Web应用程序的性能和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005625281e8991b448df90d