babel-loader: transpile modern js

写完代码发现自己的js代码不能运行在IE10或者IE11上，然后尝试着引入各种polyfill

babel的出现提供了便利，将高版本的ES6甚至ES7转为ES5，兼容低版本浏览器

steps:

1、第一安装babel所需要的依赖

npm i -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime

npm i -S @babel/runtime

2、然后在config添加loader对js进行处理：

{

    //省略其他配置

    rules: [{

        test: /.js/,

        use: {

            loader: babel-loader

        }

    }]

}

3、把babel的配置提取到根目录，新建一个.babelrc文件：

{

    “presets”: [

        “@babel/preset-env”

    ],

    “plugins”: [

        “@babel/plugin-transform-runtime”

    ]

}

在index.js中尝试写一些es6的语法，看到代码会被转译成es5，代码在demo4中。

由于babel-loader的转译速度很慢，后面加入了时间插件后可以看到每个loader的耗时，babel-loader最耗时间；因此要尽可能少的使用babel来转译文件，对config进行改善：

{

    //省略其他配置

    rules: [{

        test: /.js$/,

        use: {

            loader: babel-loader

        },

        // exclude: /node_modules/,

        include: [path.resolve(__dirname, src )]

    }]

}

正则上使用$来进行准确匹配，通过exclude排除node_modules中的文件，include只匹配src中的文件；可以看出include的范围比exclude缩小准确，因此也是推荐使用include。