此为使用webpack快速构建vue2.0项目的方法，各个依赖包的版本和文中一致，否则不同版本的包可能webpack编译时会出问题
1、 npm init -y 初始化项目 会在当前文件夹下生成一个package.js的文件,然后全局安装npm install -g webpack@^2.1.0-beta.25打包项目，以便使用webpack命令
2、安装各种依赖项
* npm install --save vue 安装vue2.0
* npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 //安装webpack以及webpack测试服务器，
* npm install --save-dev babel-core babel-loader babel-preset-es2015
* npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件
* npm install --save-dev css-loader file-loader 用来解析css
3、编写页面
（1）、新建目录src，里面新建App.vue
<template>
<div class="app">
{{msg}}
</div>
</template>
<script>
export default {
data(){
return {
msg:'aaaaaaa'
}
}
}
</script>
<style>
.app{
width: 100%;
height: 50px;
border: 1px solid red;
}
</style>
（2）、在src目录下新建main.js
/* 引入vue和主页 */
import Vue from 'vue'
import App from './App.vue'
/* 实例化一个vue */
new Vue({
el: '#app',
render: h => h(App)
})
（3）、配置webpack
/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack');
module.exports = {
/* 输入文件 */
entry: './src/main.js',
output: {
/* 输出目录，没有则新建 */
path: path.resolve(__dirname, './dist'),
/* 静态目录，可以直接从这里取文件 */
publicPath: '/dist/',
/* 文件名 */
filename: 'build.js'
},
module: {
rules: [
/* 用来解析vue后缀的文件 */
{
test: /\.vue$/,
loader: 'vue-loader'
},
/* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
{
test: /\.js$/,
loader: 'babel-loader',
/* 排除模块安装目录的文件 */
exclude: /node_modules/
}
]
}
}
（4）、打包项目
在cmd面板中使用webpack，这时目录下会多出一个dist文件夹，查看里面会有build.js，发觉里面的es6语法已经被转化了
（5）、根目录下新建index.html，引入build.js然后打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>vue-webpack</title>
</head>
<body>
<section id="app"></section>
<script src="./dist/build.js"></script>
</body>
</html>
结构图片如下
QQ截图20170221160658.png
这样就算打包完成了，但是每修改一次都要重新打包这样显然没有任何效率，于是需要线上的热重载
4、npm install -g webpack-dev-server@^2.1.0-beta.9 全局安装 ，然后在cmd中键入webpack-dev-server，即可启动热重载服务。
在浏览器输入http://localhost:8080/查看页面
这时修改页面的代码，不用刷新浏览器直接更改
这时候可以看到
QQ截图20170221160844.png
网友评论