webpack是基于nodejs运行的，所以在安装webpack之前必须先安装nodejs环境,

安装步骤如下   如果用的是淘宝镜像的话，请用rnpm

1、去 https://nodejs.org/en/ 中下载当前操作系统匹配的版本,windows下软件名称通常叫做 node.exe

2、双击node.exe一路安装好，由于node.exe已经包含了npm工具，所以npm也能正常使用了

3、由于直接使用npm install 安装第三方包是去国外网站上下载，有可能会被墙而安装失败，所以我们要将下载源切换到国内淘宝上因此需要利用npm install nrm -g安装一个全局的nrm

4、安装好nrm以后，在cmd命令面板中输入：nrm use taobao 将下载源切换到淘宝

，可以使用 nrm ls 查看当前使用的下载源

5、也可安装淘宝提供的类似于npm的工具 cnpm来替代npm安装node包,安装包命令和npm一样，安装cnpm命令： npm install cnpm -g

1 第一种安装方式：npm使用国外镜像下载，速度慢
2 在cmd命令行面板中 执行： npm install webpack@3.4.0 -g 将webpack
3 安装为全局就能够在cmd命令行面板中使用webpack指令了
4
5 第二种安装方式：cnpm 使用淘宝作镜像下载，速度快
6 在cmd命令行面板中 执行： cnpm install webpack@3.4.0 -g 将webpack
7 安装为全局就能够在cmd命令行面板中使用webpack指令了

// 导入html-webpack-plugin 包，用来根据模板自动生成index.html
var htmlwp = require('html-webpack-plugin');module.exports={
entry:'./src/main.js', // 1.0 定义打包的入口文件路径
output:{
path:'./dist', //打包以后的文件存放目录
filename:'build.js' // 打包以后生成的文件名称
},
module:{
loaders:[ //webpack2及其以上也可以使用 rules:[]
{
// 打包 .css文件
test:/\.css$/,
loader:'style-loader!css-loader'
}
]
},
plugins:[
new htmlwp({
title: '首页', //生成的页面标题
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
template: 'index1.html' //根据index1.html这个模板来生成(这个文件请你自己生成)
})
]
}

 1 module.exports = {
 2     entry:"./main.js",//设置入口文件（目标文件）
 3     output:{
 4         // __dirname ：可以得到当前文件的绝对路径
 5         path: __dirname +"/dist",//输出文件的路径(出口)
 6         filename:"build.js"//设置打包好以后的文件名
 7     },
 8     module:{
 9         loaders:[
10             {
11                 //配置打包css文件
12                 test: /\.css$/,// 匹配当前项目中所有以.css结尾的文件,将这些文件交给下面两个第三方包进行打包
13                 loader:"style-loader!css-loader"// 实现css文件打包
14             },
15             {
16                 // 配置打包sass文件
17                 test: /\.scss$/,// 匹配当前项目中所有以.scss结尾的文件,将这些文件交给下面两个第三方包进行打包
18                 loader:"style-loader!css-loader!sass-loader"// 实现sass文件打包
19             },
20             {
21                 // 配置打包less文件
22                 test: /\.less$/,// 匹配当前项目中所有以.less结尾的文件,将这些文件交给下面两个第三方包进行打包
23                 loader:"style-loader!css-loader!less-loader" // 实现less文件打包
24             },
25             {
26                 // 配置打包url()请求的资源
27                 test: /\.(png|jpg|gif)$/,// 将来会将png,jpg,gif后缀的文件进行打包
28                 loader:"url-loader?limit=40000" //依赖整url-loader
29                 // limit用来设置文件的大小
30                 // 2097152 ---> 2M 在图片大小为小于2M的时候直接将图片打包输出文件中
31                 //                 在图片大小为大于2M的时候直接将图片复制到当前的目录下
32             }
33         ]
34     }
35 }

webpack中使用css-loader和style-loader这两个loader来处理css资源的打包工作，所以使用前必须在项目中先安装这两个包:

1 npm i css-loader style-loader --save-dev

webpack中使用sass-loader，css-loader，style-loader来处理.scss文件的打包工作,而sass-loader需要依赖于node-sass所以使用前必须在项目中先安装这些包，

并且node-sass的某些文件下载是需要去google上的，为了防止被墙而导致安装失败，所以建议使用cnpm来安装：

1 cnpm install node-sass sass-loader css-loader style-loader --save-dev

在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成

此时检查build.js文件的内容，sass语法是变成了css语法表示打包成功

需要安装的node包有：

css-loader： 编译css

style-loader：编译css

less-loader： 编译less

less: less-loader的依赖包

 

在项目根目录下打开cmd命令面板，输入：

npm install less less-loader style-loader css-loader --save-dev 回车即可完成安装

在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成

此时检查build.js文件的内容，less语法是变成了css语法表示打包成功

需要安装的node包有：

url-loader：打包通过url()方式的请求资源

file-loader: url-loader的依赖loader

 

在项目根目录下打开cmd命令面板，输入：

npm install url-loader file-loader --save-dev 回车即可完成安装

在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成

检查是否成功分两种情况：

1、如果打包的图片大小大于配置文件中 url-loader?limit= 中的limit值的话，则会在目录下看到一张单独的一个图片

2、如果打包的图片大小小于等于配置文件中 url-loader?limit= 中的limit值的话，则会将图片以base64格式存储在build.js中

 

请按照上述两种情况去验证是否打包成功

webpack2+已经能够不需要依赖于babel-loader 即可完成ES6语法的转换，但是如果使用的是webpack1则还需要安装相关包：

babel-core

babel-loader

babel-preset-es2015

babel-plugin-transform-runtime：这个包主要是使用webpack1.0打包.vue组件页面中的es6语法需要,webpack2+中不需要

 

在项目根目录下打开cmd命令面板，输入：

npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev 回车即可完成安装

在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成

检查build.js文件中，如果出现了类似于 require('../statics/css/site.css');

但是看不到import '../statics/css/site.css' 表示转换成功

我们在修改了代码以后需要不断的重新执行webpack命令重新打包然后回到浏览器刷新页面去查看，这种开发效率很低下，

所以这里使用webpack-dev-server当代码更新的时候自动重新打包和刷新浏览器。

 

需要安装的node包有：

webpack@3.4.0 : webpack-dev-server依赖于webpack

webpack-dev-server@2.6.1 ： webpack开发服务器

html-webpack-plugin@2.28.0 ：结合webpack在内存中自动生成index.html的入口文件

在项目根目录下打开cmd命令面板，输入：

npm install webpack@3.4.0 webpack-dev-server@2.6.1 html-webpack-plugin@2.28.0 --save-dev 回车即可完成安装

 

需要注意的是：package.json中的name属性不能是webpack，否则在执行 npm i webpack --save-dev的时候会报错：

Refusing to install webpack as a dependency of itself

1 "scripts": {
2 　　"dev":"webpack-dev-server --inline --hot --open --port 5008"
3 }

参数说明：

--inline :自动刷新

--hot :热加载

--port 指定监听端口为 5008

-- open : 自动在默认浏览器中打开

-- host： 可以指定服务器的ip，不指定默认为127.0.0.1(localhost)

webpack-dev-server要实现浏览器自动刷新，必须要利用html-webpack-plugin在内存中生成index.html页面才能实现

html-webpack-plugin 配置步骤：

1、在webpack.config.js中加入如下代码：

1 // 导入html-webpack-plugin 包,获取到插件对象
2 var htmlwp = require('html-webpack-plugin');

1
2 plugins:[
3 new htmlwp({
4 title: '首页', //生成的页面标题，需要在模板index1.html中的title中使用：<%= htmlWebpackPlugin.options.title %>
5 filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
6 template: 'index1.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
7 })
8 ]

在cmd中执行npm run dev 命令开启 webpack-dev-server服务器来运行vue项目

这时候可以随便修改一个css样式，就会自动刷新看到效果

Vue项目中的每个页面其实都是一个.vue的文件，这种文件，Vue称之为组件页面，必须借助于 webpack的vue-loader才能使用

所以必须安装相关包：

vue : vuejs核心包

vue-loader ： .vue文件编译loader

vue-template-compiler ： .vue模板编译,被vue-loader所依赖

babel-plugin-transform-runtime : es6实时转换成es5语法

 

1、在项目根目录下打开cmd命令面板，输入：

npm install vue-loader@11.3.4 vue-template-compiler@2.2.6 babel-plugin-transform-runtime@6.23.0 --save-dev 回车即可完成安装

npm install vue@2.2.6 --save 回车即可完成安装

 

注意：babel-plugin-transform-runtime 这个包主要是为了兼容webpack1.x中使用，webpack2+中可以不用

为了兼容webpack1.x，2.x,3.x 拷贝上面的安装命令全部安装即可

 

2、在项目根目录下新建 .babelrc文件，内容填写如下：

1 {
2 　　presets: ['es2015'],
3 　　plugins: ['transform-runtime'] //这句代码就是为了解决webpack1.x中打包.vue文件不报错，在webpack2+中正常
4 }
5  

3、在webpack.config.js中的loaders中增加

1 {
2     // 打包.vue文件
3     test:/\.vue$/, //表示当前要打包的文件的后缀正则表达式
4     loader:'vue-loader' //
5 }

1、<template><div class="tmpl"></div>由于是vue2.0 所以这个里面一定要放一个根元素，可以放vue的指令 v-</template>

 

2、<script> export default{data:{}} -> new Vue({data:{}}) 就是导出一个 Vue的实例 </script>

 

3、<style></style> 中的样式是全局的

<style scoped></style> 中的样式是当前组件的

1、npm install vue --save

2、在main.js中编写解析.vue的代码

// 1.0 导入vue这个包

import Vue from 'vue';

// 2.0 导入 App.vue文件

import App from './App.vue';

// 3.0 将App中的内容编译解析出来替换index.html中的<div id="app"></div>

new Vue({
el:'#app',
// render:function(create){create(App);} es5语法
render:create=>create(App) //es6语法
});

1、对象的写法

es5中对象： {add:add,substrict:substrict}

es6中对象： {add,substrict} 注意这种写法的属性名称和值变量是同一个名称才可以简写，否则要想es5那样的写法,例如： {addFun:add}

2、在对象中的方法的写法

es5中对象： {add:function(){},substrict:function(){}}

es6中对象： {add(){},substrict(){}}

3、对象的导出写法

es5两种形式：

1、module.exports = fucntion (){};

2、exprots.add = fucntion (){};

es6中写法：

1、export default{

add(){}

}

2、export fucntion add(){} 相当于 将add方法当做一个属性挂在到exports对象

4、对象的导入

es5: var add = require('./calc.js');

es6:

如果导出的是：export default{ add(){}}

那么可以通过 import obj from './calc.js'

如果导出的是：

export fucntion add(){}

export fucntion substrict(){}

export const PI=3.14

那么可以通过按需加载 import {add,substrict,PI} from './calc.js'

5、es6中的箭头函数的写法

箭头的演变过程：

//需求：利用函数实现倒序排列

[2,1,3].sort(function(x,y){return y - x;});

//用箭头函数实现 =>读 goes to

[2,1,3].sort((x,y)=>{return y - x;});

[2,1,3].sort((x,y)=> {x++;y++; y - x;});

[2,1,3].forEach(x=> {console.log(x)});

码云（http://git.oschina.net/）是一个类似于github的中国的源码托管网站，可以自己创建仓库以后，使用git进行源码的管理

使用步骤如下：

咱们前面从0到1带领大家一步步搭建了属于自己的WebPack+Vue项目，但其实Vue官方提供了一个快速搭建大型单页应用的工具Vue-cli

该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目