插件可以更具开发环境定义，因为插件越多，编译越慢，我们在开发环境的时候其实不需要那么多插件，生产环境的时候才需要，所以可以做一些处理，动态添加插件。这里有文章可以做,不介绍。
4. 写逻辑代码
// index.js var Vue = require('vue'); var app = new Vue({ el: '#app', components: { app: require('./src/app.js') } });
require('vue')，使用vue模块，新建vue实例，（vue的具体用法上官网），内建一个app字组件，用同步的方法获取在./src/目录下的app.js模块。
// index.html 入口模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vueapp</title> </head> <body> <app></app> </body> </html>
html-webpack-plugin会自动生成插入的script，制成入口。
// app.js var template = require('./app.html'); require('./app.less'); module.exports = { template: template, data: function (){ return { message: 'hello word!!' }; } };
// app.html 视图模板 <div> <img src="https://www.jb51.net/article/static/logo.png" alt=""> <div> {{message}} </div> </div>
// app.less 视图样式 #div1 { text-align: center; } #div2 { font-size: 30px; }
定义一个视图，作为首页，引入模板，引入样式，一个SPA的架子就这么搭好了。
5. 编译
在工程目录下命令行输入
webpack
生成目录
├── dist │ ├── common.6b92c6b075a69a71d22f.js │ ├── index.6b92c6b075a69a71d22f.js │ ├── index.html │ └── style.6b92c6b075a69a71d22f.css
编译完成，可以看到以上的目录，common为公共提取的模块，style是公共提取的css文件，index.js，逻辑入口。项目打包完成。
6. 调试开发
webpack 提供了 weppack-dev-server 插件，很方便我们进行调试，我们在package.json的script中定义一个命令：
'dev': 'webpack-dev-server --hot --inline'
我们就可以在命令行中输入 npm run dev，在浏览器输入localhost：8080就可以看到网页了。