webpack使用(3)之编译ES6/7

最新推荐文章于 2022-11-12 10:08:58 发布

Blockchain Explorer

最新推荐文章于 2022-11-12 10:08:58 发布

阅读量336

点赞数

分类专栏： JavaScript/ES6/NodeJS 实用工具文章标签： webpack babel

本文链接：https://blog.csdn.net/TDCQZD/article/details/82560837

版权

本文介绍了如何在webpack中使用babel-loader和相关依赖库转换ES6/7语法。重点讲解了babel配置，包括安装babel-loader、@babel/core、Babel-presets，以及如何根据浏览器兼容性选择preset。同时，提到了通过Babel-plugin进行API兼容，如全局和局部使用es6-promise的配置方法。

摘要由CSDN通过智能技术生成

一、基本介绍

首先我们需要注意, ES6/7对js语言不但在语法上做了扩充,其在api上也做了大量的扩展。在webpack中对于es6语法的转换我们可以使用babel-loader及相关依赖库来完成（但具体按照哪个规范来进行转换，需要参照于babel的preset）。但对于api的兼容，babel-loader是无法完成的，我们需要借助于babel的插件
(babel-polyfill babel-runtime babel-plugin-transform-runtime)。

二、babel配置

js文件

window.onload = ()=>{
    console.log("window onload ing....");

    const fn =()=>{
        console.log("testES6")
    };
    fn()
}

webpack.config.js

const path = require("path");
module.exports={
    entry:{
       demo: "./js/index.js"
    },
    output:{
        filename:"[name].min.[hash:5].js",
        path:path.resolve(__dirname,"dist")
    }
}