代码改变世界

解决白屏(vue) - webpace es6转es5

2018-07-19 13:54  路途遥远,Go~  阅读(5387)  评论(1编辑  收藏  举报

1.npm安装

npm install babel-polyfill
npm install es6-promise

 package.json中会出现

"babel-polyfill": "^6.26.0",
"es6-promise": "^4.1.1",

  

2.main.js引入

import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()

 

3.webpack.base.conf.js

module.exports = {
entry: {
app: ['babel-polyfill', './src/main.js']
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
query:{presets:['es2015']},
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},

 

4.在.babelrc文件里加入

{
"presets":["es2015", "stage-2"],
}