最简单的vue项目

import App from './App'
import Vue from 'vue'
 new Vue({
   el:'#app',
   components: { App },
   template:'<App/>'
 })

package.json

"scripts": {
    "dev": "webpack-dev-server --open"
  },

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="main.min.js"></script>
</body>
</html>

开发时src写main.min.js（与webpack的出口名字对应，output)
编译后时src写dist/main.min.js(使用命令webpack可以编译出来，结果放在dist目录下)
App.vue

<template>
<div>hh</div>
</template>
<script>
export default {
data(){
return {
}
},created(){},methods:{},components:{}
}
</script>
<style lang='less' scoped>
</style>

webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry: './src/main.js',//入口
  output: {//出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.min.js'
  },
  module: {
    rules: [
      { test: /\.vue$/, use: ['vue-loader'] }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式  vue结尾的
    }
  },
  plugins:[new VueLoaderPlugin()]
}

npm i vue-loader vue-template-compiler webpack-dev-server vue webpack-cli webpack -D
npm run dev
github地址：https://github.com/lanweipeng/vue-webpack-template
作业：自己配置less或scss，不懂自己百度
遇到想要的功能，就是百度
举例：webpack如何配置less