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

一、基本介绍

首先我们需要注意, 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")
    }
}

1、babel-loader
安装：

    npm install --save-dev babel-loader babel-core

配置babel-loader：


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

配置后的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")
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                },
                exclude: '/node_modules/'
            }
        ]
    }
}

2、 @babel/core
安装

npm install  @babel/core --save-dev

3、Babel-presets
项目需要兼容的浏览器版本。

安装：Babel-presets

npm install babel-preset-env --save-dev

配置babel-loader：配置options


    module:{
    rules:[
        {
        test:/\.js$/,
        use:{
            loader: ’babel-loader’,
            options:{
            presets:[
            [‘babel-preset-env’,{
            targets:{
            //browsers:[‘> 1%’,’last 2 version’]
            chrome:52
            }
            }]
            ]
            }
        },
        exclude:’/node_modules/’
        }
    ]
    }

配置后的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")
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options:{
                        presets:[
                            ['babel-preset-env',{
                                targets:{//浏览器版本控制
                                    //browsers:['> 1%','last 2 version']
                                    chrome:32
                                }
                            }]
                        ]
                    }
                },
                exclude: '/node_modules/'
            }
        ]
    }
}

代码转换成功：

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

  var fn = function fn() {
    console.log("testES6");
  };

  fn();
};

4、Babel-plugin：
1)es6全局衬垫代码
安装：es6全局衬垫代码

    npm install babel-polyfill --save

配置：
直接在入口文件中 import ‘babel-polyfill’
2)es6局部衬垫代码
安装：es6局部衬垫代码

    cnpm install babel-plugin-transform-runtime --save-dev
    cnpm install babel-runtime  --save

配置：
新建 .babelrc 文件

    {
    “presets”:[
        [“babel-preset-env”,{
            “targets”:{
            “browsers” : [‘> 1%’]
        }
    }]
    ],
    “plugins”:[“transform-runtime”]
    }