Webpack之babel处理es6

Webpack处理es6

webpack能自动处理import和export，所以很多人认为webpack能自动处理es6，其实不然。只是因为模块打包需要，所以处理import和export，除此之外他并不能转换其他的es6特性。

为了能够解析es6，需要为我们的js文件配置一个额外的编译型loader，最常用的就是babel-loader

具体做法如下：

• 先安装一下相应的loader：yarn add babel-loader @babel/core @babel/preset-env --dev

• 安装完成过后需要指定加载器

  • module:{
        reles:[
            {
                test:/.js$/,
                use:{
                    loader:'babel-loader',
                    option:{
                        presets:['@babel/preset-env']
                    }
                }
            }
        ]
    }
    

• 最后进行打包

总结

• Webpack只是打包工具。
• 加载器用来编译转换代码。