首先我的目录结构是这样的

vue
│  index.html
│  package.json
│  webpack.config.js
│
├─dist
│      demo.js
│
└─src
        App.vue
        main.js

package.json

{
  "name": "myvue",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --hide-modules"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^1.0.0",
    "style-loader": "^0.23.0",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "vue": "^2.5.17"
  },
  "babel": {
    "presets": [
      "es2015"
    ],
    "plugins": []
  }
}

webpack.config.js

const path = require('path')
module.exports ={
  mode: 'development',
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"demo.js"
    },
    module:{
        rules: [
           //出来样式
          {
          test:/\.css$/,
          use: [
               'style-loader',
               'css-loader'
             ]
        },
          //解析vue后缀文件
            {test: /\.vue$/, loader: 'vue-loader'},
            //转es5
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader',
          query: {
            presets: ['es2015']
          }
        }
     ]
    },
    resolve: {
      //因为运行时构建不包含模板编译器,所以必须添加此设置才能预览
      //alias: {'vue$': 'vue/dist/vue.esm.js' },
      alias: { 'vue': 'vue/dist/vue.js' }
   }
}

main.js

import Vue from 'vue'
import App from './APP.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

package.json：

1、"babel-loader": "^7.1.5",//默认安装的是8.0.0运行会报错

2、貌似安装babel-preset-es2015不行，必须要安装babel-preset-env，现在两个都装了

3、一定要设置babel.presets[]

4、安装webpack时一定还要安装webpack-cli

5、"vue-loader": "^14.2.2",//默认安装的是15以上的版本会报错

webpack.config.js：

6、一定要配置resolve.alias: { 'vue': 'vue/dist/vue.js' }//vue编译器，否则预览报错

7、module.rules 引入规则webpack版本不同有所区别，还是老实拷贝

    "babel-core": "^6.26.3",//es6转es5

    "babel-loader": "^7.1.5",//es6转es5

    "babel-preset-env": "^1.7.0",//es6转es5

    "babel-preset-es2015": "^6.24.1",//es6转es5

    "css-loader": "^1.0.0",//编译css

    "style-loader": "^0.23.0",//编译css，在页面上追加style标签

    "vue-loader": "^14.2.2",//加载.vue文件

    "vue-template-compiler": "^2.5.17",解析.vue模板文件

    "webpack": "^4.17.1",

    "webpack-cli": "^3.1.0"

    "vue": "^2.5.17"