根据 webpack 版本的不同，安装的 babel 依赖有些区别，下面的是 webpakc 4.2 及以上版本安装的依赖。 4.2 之前的是：babel-core、babel-preset-env

  要配置 babel 首先需要安装 @babel/core，这是 babel 的核心编译包：

cnpm install --save-dev @babel.core

  然后需要安装 babel-loader 来帮助我们加载使用 babel：

cnpm i --save-dev babel-loader

  这时候，在 webpack.config.js 中 rules 的代码是这样的：

module:{
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader'
            },
            exclude:path.resolve(__dirname,'/node_modules'),
            include: path.join(__dirname, 'src_1')
        }
    ]
}

  上面的代码中， exclude 表示不想被 babel 处理的文件目录，include 表示需要被处理的目录，不加 include 的话应该就是会处理除 exclude 以外的其他目录。

  然后，我们可以选择 babel 的解析标准，比如我们需要按照 ES6 的标准来，那么就需要装一个 babel-preset-es2015，若要按照 ES7 的标准，就需要按照 babel-preset-es2016。不过我们可以直接安装一个 @babel/preset-env ，它等价于 babel-preset-latest，可以编译所有新规范的代码：

cnpm install --save-dev @babel/preset-env

  这下，我们的 webpack 中是这样的：

module:{
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            },
            exclude:path.resolve(__dirname,'/node_modules'),
            include: path.join(__dirname, 'src_1')
        }
    ]
}

  presets 中还有其他选项可以帮助我们兼容 js，可根据自己的需求来，具体可看：babel-preset-env

  除了 webpack，我们还需要在工程目录下创建一个 .babelrc 文件，把关于 babel 的配置放进去：

{
    "presets": ["@babel/preset-env"],
}

  一般来说 babel 这样配置就差不多了，不过在 build 的时候项目里在类中的箭头函数处报了错，提示还需要一个插件 @babel/plugin-proposal-class-properties

  因此按照提示安装：

cnpm i --save-dev @babel/plugin-proposal-class-properties

  最后， package.json 就是这样的：

"devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2"
}

  然后还需要修改 .babelrc ：

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}