webpack的babel设置

  众所周知webpack打包能够处理一些高级的ES语法，比如我们使用了ES6中的import，那么我们只需要打包这个.js文件，然后运行就行了，但是这么做有一个缺点，不能够解析更高级的语法，只能解析ES6低级的语法，例如class static语法糖是不会被解析的。

  我们可以在webpack中使用Babel来解决这个问题。

1、babel是什么？

babel是一个JavaScript的编译器，https://www.babeljs.cn/

2、babel的作用？

babel能够将高级的JavaScript语法转化成低级的JavaScript语法，例如将ES6/7转化成ES5/4等。

3、babel如何使用？

在这里只研究babel在webpack下的使用方式

3.1、安装

  babel的安装，需要的包比较多，有两套包需要安装。

• babel的第三方装载器：babel-core babel-loader babel-plugin-transform-runtime

    cnpm babel-core babel-loader babel-plugin-transform-runtime -D

• babel的语法识别器：babel-preset-env  babel-preset-stage-0

  cnpm  babel-preset-env  babel-preset-stage-0 -D

3.2、配置

3.2.1、webpack.config.js设置

  既然要用到第三方加载器，那么就需要到webpack.config.js下的modules下的rules下编写相关的文件匹配规则：

  {test:/.\js$/,use:'babel-loader',exclude:/node_modules/}

test----匹配.js的文件（高级别的文件）

use---使用的第三方加载器

exclude---不自动匹配node_modules文件

const path=require('path');
const htmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'src/index.html'),
            filename:'index.html'
        })
    ],
    module: {
        rules: [
            {test:/\.css$/,use:['style-loader','css-loader']},  //css匹配规则
            {test:/\.png$/,use:'url-loader'},    //url匹配规则
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}  //.js 使用babel匹配的规则
            //test---匹配.js文件  use---匹配器  exclude:/.../---不匹配这里面的文件
        ]
    }

};

3.2.2 创建.babelrc文件

  在项目的根目录下创建一个.babelrc文件，使用的是json格式。

  {

  "presets":["env","stage-0"],

  "plugins":["transform-runtime"]

}

其中presets中的值是，使用的语法加载器，plugins的值是使用的babel插件，我们在上面安装的那两个包就使用到了。

3.3、使用

  正常运行项目之后，webpack会使用babel去识别.js的文件并处理，处理完成后的结果交给webpack打包后使用。

注意！！！我们在安装babel-loader要安装7.x版本的，默认安装的话是最新版8.x版本，使用的话会出错

   cnpm i babel-loader@7.1.2 -D