webpack——ES6转ES5

ES6语法不是所有浏览器都支持的，所以我们需要配置对应的babel-loader来将ES6语法转换为兼容性更好的ES5语法。

1.安装babel-loader及相应的包

这里需要注意对应的版本问题，具体可查看这篇文章babel相关包版本兼容问题

# babel-loader 8.x | babel 7.x 
npm install -D babel-loader @babel/core @babel/preset-env
# babel-loader 7.x | babel 6.x 
npm install -D babel-loader@7 babel-core babel-preset-env webpack

这里使用8.x版本。

2.配置.babelrc文件

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

3.在webpack.config.js中配置loader

module: {
    rules: [{
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
    }]
}

然后运行webpack打包就会发现ES6语法也能正常运行，而不报错了。