webpack+vue.js快速入门教程
前言
vuejs——轻量、学习成本低、双向绑定、无dom的操作、组件的形式编写
vuejs是个轻量级的mvvm框架，集合了angular的基本功能，却又比angular更为精简，功能上涵盖了双向绑定、指令、逻辑控制、过滤器、事件监听、函数等。框架的特点使得项目在状态变更、分页的场景下可以拥有很大的便利——所有的操作只需要变更数组，没有任何的dom操作。
webpack——CommonJS的引用和编写方式、loader非常的丰富，包括vue-loader、css-loader、less-loader
webpack是前端组件化的解决方案，webpack提供了核心的CommonJS引用方案去引用资源，下面这篇文章就给大家介绍webpack和vue.js，一起来看看吧。
项目的创建
1.新建项目文件夹，并在其中建立package.json
$mkdir[projectname] $cd[projectname] $npminit
2.在项目目录下新建index.html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vueexample</title>
</head>
<body>
<div>{{message}}</div>
<scriptsrc="dist/build.js"></script>
</body>
</html>
src文件夹，并在该文件夹下建立main.js
importVuefrom'vue'
newVue({
el:'body',
data:{
message:'testsuccess!'
}
});
设置webpack
1.安装webpack，webpack-dev-server以及相关的loaders
#全局安装webpack，webpack-dev-server $npminstall-gwebpack $npminstall-gwebpack-dev-server #为项目安装其他依赖 $npmiwebpack-mergecss-loaderstyle-loaderfile-loaderurl-loaderbabel-corebabel-loaderbabel-plugin-transform-runtimebabel-preset-es2015babel-preset-stage-0babel-runtimevuevue-loadervue-html-loadervue-style-loadervue-hot-reload-api-D
webpack-merge：开发环境和生产环节的webpaak配置文件的配置合并
css-loader：编译写入css
style-loader：把编译后的css整合进html
file-loader：编译写入文件，默认情况下生成文件的文件名是文件名与MD5哈希值的组合
vue：vue主程序
vue-loader：编译写入.vue文件
vue-html-loader：编译vue的template部分
vue-style-loader：编译vue的样式部分
vue-hot-reload-api：webpack对vue实现热替换
babel-core：ES2015编译核心
babel-loader：编译写入ES2015文档
babel-preset-es2015：ES2015语法
babel-preset-stage-0：开启测试功能
babel-runtime：babel执行环境
url-loader
这里介绍下url-loader，这个loader实际上是对file-loader的封装
比如CSS文件中有时候会这么写：
.demo{
background-image:url('a.png');
}
module:{
loaders:[
{test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}
]
}
经过以上配置，当a.png小于8K就会自动将图片转换成base64编码，如果不小于，则不会转换。
这里顺便提一句，在module配置的时候，loader的写法：
module:{
loaders:[
{test:/\.jade$/,loader:'jade'}
//这里配置了让webpack识别jade的loader，其他类似，比如.vue
//用于css文件的loader有两种写法
{test:/\.css$/,loader:'style!css'}
{test:/\.css$/,loaders:['style','css']}
]
}
2.配置webpack.config.js
在根目录下建立webpack.config.js，配置如下：
varpath=require('path');
module.exports={
entry:'./src/main.js',
//定义webpack输出的文件，我们在这里设置了
让打包后生成的文件放在dist文件夹下的build.js文件中
output:{
path:'./dist',
publicPath:'dist/',
filename:'build.js'
},
module:{
loaders:[
//转化ES6语法
{
test:/\.js$/,
loader:'babel',
exclude:/node_modules/
},
//图片转化，小于8K自动转化为base64的编码
{
test:/\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
}
]
},
//这里用于安装babel，如果在根目录下的.babelrc配置了，这里就不写了
babel:{
presets:['es2015','stage-0'],
plugins:['transform-runtime']
}
}
特别说明
如果要在.babelrc下配置babel，则需要在根目录下新建该文件，windows环境下，不能新建该txt文件然后改后缀，需要通过dos命令建立：
echo>.babelrc
通过该命令就可以建立babelde配置文件，用编辑器打开，修改里面的内容为：
{
"presets":["es2015","stage-0"],
"plugins":["transform-runtime"]
}
完成该配置我们在命令中运行
$webpack
打开index.html就可以看到浏览器中看到我们刚刚写的文字
总结
至此我们实现了最基本的利用webpack打包vue，大家最好自己实际操作下代码才能更好的理解，希望这篇文章对大家能有所帮助，如果有疑问大家可以留言交流。