webpack babel

安装

核心 babel-core

功能 babel-loader babel-preset-env babel-preset-react

babel-loader 7.x 版本安装

cnpm install babel-core babel-loader@7 babel-preset-env babel-preset-react --save

安装的 babel-loader 是7.x版本，8.x版本目前会出现报错，具体如何解决还没有了解清楚，所以安装 babel-loader 时需要写成这样的 babel-loader@7

babel-loader 8.x 版本安装

cnpm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react -S

上面为 babel-loader 8.x 版本安装，需要匹配下面的 8.x 配置

配置

babel-loader 7.x 版本配置

第一种 全在 webpack.config.js 中配置

rules:[
    {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader',
            options:{
                presets:['env','react']
            }
        },
        // 排除node_,modules 文件
        exclude:/node_modules/
    }
]

第二种 新建 .babelrc 文件 （推荐使用第二种）

webpack.config.js

rules:[
    {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader'
        },
        // 排除node_,modules 文件
        exclude:/node_modules/
    }
]

.baelrc

{
    "presets": [
        "env",
        "react"
    ]
}

babel-loader 8.x 版本配置

第一种 全在 webpack.config.js 中配置

rules:[
    {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader',
            options:{
                presets:['"@babel/preset-env','"@babel/preset-react']
            }
        },
        // 排除node_,modules 文件
        exclude:/node_modules/
    }
]

第二种 新建 .babelrc 文件 （推荐使用第二种）

webpack.config.js

rules:[
    {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader'
        },
        // 排除node_,modules 文件
        exclude:/node_modules/
    }
]

.baelrc

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