当先锋百科网

首页 1 2 3 4 5 6 7

最近在跟着webpack官方文档练习,由于官方文档并没有及时更新,遇到了一些些问题,查了很多文档…
这是我的一点小总结。

报错信息:
在这里插入图片描述
原因:
webpack在打包vue文件时没有成功转换ES6的语法
解决办法:
第一步:
加入babel-preset-es2015插件处理编译问题
安装依赖包:
$ npm install --save babel-preset-es2015
第二步:
webpack.config.js中加入代码:

module: {
		rules:[
			{
				test:/\.js$/,
				loader:'babel-loader',
				options:{
					presets:['es2015']
				}
			}
		]
	}

第三步:
babelrc中配置:

{
  "presets": [
    [
      "es2015",
      {
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8",
            "iOS >= 6",
            "safari >= 6",
            "Firefox >= 20",
            "Android > 4",
            "android >= 4.4"
          ]
        }
      }
    ]
  ],
  "plugins": ["transform-runtime"]
}

运行build后结果
在这里插入图片描述