targets.browsers 需要使用 browserslist 的配置方法，但是其设置会被 targets.[chrome, opera, edge, firefox, safari, ie, ios, android, node, electron] 覆盖；
targets.node 设置为 true 或 "current" 可以根据当前 Node.js 版本进行动态转换。也可以设置为具体的数字表示需要支持的最低 Node.js 版本；
targets.esmodules 设置使用 ES Modules 语法，最新浏览器支持，这个在后面 Webpack 插件章节会详细介绍如何实现 Modern Mode。
在 Webpack 中使用 Babel
通过上面的内容，我们已经掌握了 Babel 的基本用法，下面在 webpack 中使用 Babel 就变得很简单了，首先安装 npm 依赖，然后修改 webpack.config.js。
安装依赖包：
// 安装开发依赖 npm i webpack babel-loader webpack-cli @babel/core @babel/preset-env @babel/plugin-transform-runtime -D // 将 runtime 作为依赖 npm i @babel/runtime -S
第二步创建 webpack.config.js 文件，内容如下：
// webpack.config.js module.exports = { entry: ‘./babel.js', mode: ‘development', devtool: false, module: { rules: [ { test: /\.js$/, use: [ { loader: ‘babel-loader', options: { presets: [ [ ‘@babel/preset-env', { useBuiltlns: ‘usage' } ] ] } } ] } ] } }
上面的 webpack.config.js 文件直接将 Babel 的配置写到了 options 中，还可以在项目根目录下创建 .babelrc 或者使用 package.json 的 babel 字段。
小结
在本篇中，我们学习了 Webpack 怎么配置 Babel，希望对大家有所帮助，如果喜欢萝卜的文章，请大家持续关注，下一篇我将给大家介绍 webpack-dev-server 这个超好用的工具。