webpack中的babel的配置

通过babel，可以帮我们将高级语法转换为低级语法
1、安装：

npm install babel-loader babel-core babel-plugin-transform-runtime -D

npm install babel-preset-env babel-preset-stage-0 -D

2、打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：

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

注：在配置babel的loader规则的时候，必须把node_modules目录通过exclude选项排除掉，如果不排除，第一是打包的时候非常消耗CPU，打包速度慢。第二是即使把node_modules中JS转换完毕，项目也无法正常运行

3、在项目根目录中，新建一个叫做.babelrc的Babel配置文件，这个配置文件，属于JSON格式，所以，在写.babelrc配置的时候，必须符合JSON语法规范。

{
    "presets": ["env","stage-0"],
    "plugins": ["transform-runtime"]
}

---

注意！！！！，如果按上述配置出现

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js):

删除 package.json 中 babel 相关的依赖以及 node_modules 文件中 babel相关的文件，重新进行如下安装及配置：

• （1）npm install babel-loader babel-core babel-preset-env webpack

• （2）npm install --save-dev @babel/plugin-transform-runtime

• （3）npm install --save @babel/runtime （3）是（2）的依赖

• （4）在 webpack.config.js 文件中配置

   module: {
   	rules: [
       	{test:/\.js$/,use:'babel-loader', exclude: /(node_modules|bower_components)/,},
       	]
       }
  

• （5）在 babelrc 文件中配置

   {
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime"]
   }