webpack中配置vue

1、初始化

npm init -y

之后会生成package.json文件

2、安装webpack

npm install webpack webpack-cli

会生成node_modules目录

3、安装vue

npm install vue

4、测试

执行：npm run build

会报如下错误：

解决方法：

import Vue from 'vue/dist/vue.js'

5、安装vue-loader

webpack只能打包.js文件，要想打包.vue文件，需要安装vue-loader

npm install vue-loader vue-template-compiler

安装完后发现有警告，需要安装css-loader

npm install css-loader

需要注意的是：vue-loader@15版本后，需要在webpack中添加一个插件

配置文件如下：

ps

目录结构：

index.js：

app.vue:

index.html: