babel-loader: transpile modern j

写完代码发现自己的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。