webpack是一个模块加载器， 一切东西都是模块（包括css、html、js、图片等）, 最后都打包到一块了。
下面我将搭建一个简单的demo

一、新建目录结构

|-index.html
    |-main.js   //入口文件
    |-App.vue   //vue文件，官方推荐命名法（首字母大写）
    |-package.json  //工程文件(项目依赖、名称、配置)，记录需要的依赖包
        npm init --yes 生成
    |-webpack.config.js //webpack配置文件

二、编写相关文件

  1. index.html页面：展示页面

    <body>
<div class="box">  <!-- //用于挂载到vue实例上 -->
  <app></app>  <!-- //app组件 -->
</div>
<script src="build.js"></script><!-- //引入用webpack打包后的js文件 -->
</body>

  2. App.vue组件：写一条数据

    <template>
<div>
<h1>hellow word</h1>
<h2>{{ msg }}</h2>
</div>
</template>
<script>
export default {
    data() {
        return {
            msg: 'welcome Vue'
            }
         }
     }


3. main.js入口文件（需要在webpack.config中规定）

import Vue from 'vue' //引入主角vue.js，这里是因为在webpack.config中进行配置地址了
import App from './App.vue'

new Vue({

el: '.box',
components:{
    app: App
}

})


4. webpack.config文件配置webpack的选项

var webpack = require('webpack') //引入文件
module.exports={

entry:'./main.js', //配置入口
output:{  //配置输出选项
    path:__dirname,//输出路径为，当前路径下
    filename:'build.js'//输出后的文件名称
},
resolve: {//其他的配置选项
    alias: {
        'vue': 'vue/dist/vue.js'//vue文件地址配置
    }
},
module:{
    loaders:[//loader配置，需要解析啥东西就用相关的loader
        {test:/\.vue$/, loader:'vue-loader'},
        {test:/\.js$/, loader:'babel-loader', exclude:/node_modules/}//设置node_modules里的js文件不用解析
    ]
},
plugins: [//这个是2.x中加的，各种loader的配置选项
    new webpack.LoaderOptionsPlugin({
        options: {
          babel:{
              presets:['es2015'],
              plugins:['transform-runtime']
          }
        }
    })
]

};


5. package.json文件
注意：devDependencies和dependencies不是手动写入的，是在安装依赖的时候自动保存进来的

{
"name": "webpacklist",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {

"start": "webpack",
"dev": "webpack-dev-server --inline --hot --port 8088"  //设置启动服务命令，热更新

},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {

"babel": "^6.23.0", //解析es6语法
"babel-core": "^6.24.1",//解析es6语法
"babel-loader": "^6.4.1",//解析es6语法
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",//解析es6语法
"babel-runtime": "^6.23.0",
"css-loader": "^0.28.0",
"vue-hot-reload-api": "^2.1.0",//解析js文件
"vue-html-loader": "^1.2.4",//解析vue中的html语法啊
"vue-loader": "^11.3.4",
"vue-style-loader": "^3.0.0",//解析行间样式，需要两个一起写（和css-load）的时候style-loader必须要写在前面
"vue-template-compiler": "^2.2.6",//解析vue中的template
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"

},
"dependencies": {

  "vue": "^2.2.6"  //vue.js主文件

}}


6. 安装依赖文件

> 运行命令 => npm install --save-dev "模块名称"

7. 开启服务