新手webpack+vue自己写过webpack的一些配置，但是没有从零配置过vue+webpack项目。今天直接imp

背景

自己写过webpack的一些配置，但是没有从零配置过vue+webpack项目。今天直接import Vue from 'vue'，然后创建实例，却没有渲染。

操作

新建文件夹
```
mkdir vue-test
cd vue-test
```
初始化npm项目
```
npm init -y
```

安装需要的依赖

npm i webpack webpack-cli -D

npm i vue -S

项目目录

vue-test
|__package.json
|__index.html
|__src
|  |__index.js
|__webpack.config.js
|__node_modules

index.html中的内容

<!DOCTYPE html>
<html>
<head>vue+webpack</head>

<body>
    <div id="app"></div>
    <script src="./dist/build.js"></script>
</body>
</html>

index.js中的内容

import Vue from 'vue';

let v = new Vue({
    el: "#app",
    template: `
    <div>
        <div>Hello {{name}}!</div>
        Name: <input v-model="name" type="text">
    </div>`,
    data: {
        name: "World"
    }
});

webpac.config.js中的内容

let path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.js'
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

重点是alias中的东西必须加

package.json中的内容

{
  "name": "vuea",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

最后运行npm run dev，然后打开浏览器就可以啦！