webpack中babel的配置

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Tomwildboar/article/details/82177549

目的：webpack，默认只能解析一部分的ES6的语法，我们需要安装babel插件，来辅助webpack解析语法。

第一步：安装插件 

1-1：（cnpm i babel-core babel-loader babel-plugin-transform-runtime -D）

 1-2：（cnpm i babel-preset-env babel-preset-stage-0 -D）

第二步：在webpack.config.js里面的module里面配置

 第三步：创建 .babelrc 并配置

 

第四步：测试

4-1：我在mian.js里面写了一个高级一点的语法，单纯的用webpack会报错。现在我们来看看安装插件之后的是否会报错

 还是报错了，上面我们第一步安装插件的时候，出现了一个警告。

 即使安装了还是会报一个错。经过各种测试，发现是插件版本不兼容，

解决办法，就是删除你的node_modules。把你的package.json对应的插件版本修改如下

"babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",

 然后再次重新安装   cnpm i