webpack4-babel转换

目前浏览器可识别的js是es5部分可识别es6所以为了兼容大部分浏览器，需要将es6 es7 es8转换成es5那就需要用到babel，进入webpack-course项目的根目录下面，安装依赖包babel-core

npm i babel-core  //注意如果安装babel7的话采用下面的方式来安装
npm i @babel/core

在根目录下面新建文件 .babelrc
.babelrc文件，这个文件是用来设置转码的规则和插件的。
熟悉linux的话一定知道，rc结尾的文件通常代表运行时自动加载的文件，配置等等。在babel6中，这个文件必不可少。

touch .babelrc    //注意加点

安装插件,在webpack中可以使用箭头函数

npm i babel-plugin-transform-es2015-arrow-functions

在.babelrc文件(该文件其实就是一个json文件)中进行插件配置

{
    "plugins": [
        "transform-es2015-arrow-functions"
    ]
}

如果想要可以使用babel命令，我们可以全局安装babel-cli

npm i -g babel-cli 

然后就可以运行babel命令了

babel src/main.js

babel转箭头函数以后的结果

如果想要在webpack中打包的时候将js转换为es5那么我们还需要配置一下js的loader，在webpack.dev.js里面配置module

            //js loader
            {
                test:/\.js$/,
                use:[
                    {
                        loader:"babel-loader"   //该loader会对js进行转换
                    }
                ],
                exclude:/node_modules/  //不包含node_modules里面的js文件
            },

然后安装babel-loader

npm i babel-loader

然后运行项目可以正常运行