webpack+vue 我的视角（持续更新）

最近一直在研究webpack+vue的组合拳，现在分享一下：

webpack就是一个项目管理工具，可以各种模块化加载，然后压缩，当然还有热加载技术（时灵时不灵。。）

vue是mv*模式的框架，组件化开发，很轻量级的,有自己的路由系统，组件，数据绑定等等。（可以配合animate.js做出来）

当他们组合起来用的时候是这样的。。。学习阶段的搭建：

1.webpak准备工作:

首先，安装环境

安装webpack，开启webpack服务器

cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev

//App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev

cnpm install vue-html-loader --save-dev

编译html，css，热加载等，都是模块化开发的工具
vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2

//es6的语法编译为es2015

babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime

-----------------------------------------------------------

webpack.config.js的配置：

module.exports={
entry:'./main.js',

output:{
path:__dirname,
filename:'build.js'
},

module:{
loaders:[
{test:/\.vue$/, loader:'vue'},
{test:/\.js$/, loader:'babel', exclude:/node_modules/}
]
},
babel:{
presets:['es2015'],
plugins:['transform-runtime']
}
};

接下来就是vue模块开发了。。。

2.介绍一下脚手架的工具运用：

基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
验证安装ok?
vue --version
2. 生成项目模板
vue init <模板名> 本地文件夹名称

webpack 可以使用(大型项目)，Eslint 检查代码规范

单元测试
webpack-simple  推荐使用, 没有代码检查

3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev