很多人都是直接用 vue-cli 构建vue项目，但并不清楚其中的原理，我折腾了几天，踩了一堆坑，终于自己弄出了一个 vue 项目文件，这需要 npm install 一下就能直接构建项目了
文件目录如下：

image.png

package.json如下

{
  "name": "vue-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-component": "^0.10.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.5.2",
    "style-loader": "^0.19.0",
    "css-loader": "^0.28.7",
    "webpack": "^3.8.1"
  }
}

webpack.config.js如下

var path=require('path')

module.exports={
  entry: path.join(__dirname, './main.js'), // 入口文件
  output: { // 指定输出选项
    path: path.join(__dirname, './dist'), // 输出路径
    filename: 'bundle.js' // 指定输出文件的名称
  },
  module:{
    rules:[
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  resolve:{
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

.babelrc如下：

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