WebPack第四讲------Loaders (ES6转ES5)

上一篇:WebPack第三讲------服务器配置 

https://blog.csdn.net/oracle8090/article/details/106388780

ES6转ES5其实用的是babel的规范

babel参考地址:

中文 https://www.babeljs.cn/docs/configuration

英文 https://babeljs.io/setup#installation

一、安装

 在项目根目录执行

 cnpm install --save-dev babel-loader @babel/core @babel/preset-env

安装完以后在配置文件中会多出三个依赖

 

二、配置loader

 //loaders的配置
    module:{
        //每一个规则是一个转码形式
        //ES6转ES5的规则
        rules:[
            {
                test:/\.js$/,//匹配所有的.js文件
                //忽略node_modules的文件，不进行转码
                exclude:/node_modules/,
                //转码规则
                loader:"babel-loader"
            }
        ]
    },

三、在根目录增加一个配置文件.babelrc

           

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

四、编码ES6代码 

export default function hello(){
    var divs = document.createElement("div");
    divs.textContent = "文本信息！！！"; // innerHTMl
    return divs;
}

import Hello from "./hello"
document.getElementsByTagName("body")[0].appendChild(Hello())

五.运行 npm start