Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。
Webpack 可以将js、css、png等多种静态资源 进行打包，使用webpack有什么好处呢？ 1、模块化开发 程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文 件，减少了http的请求次数。 webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。 2、 编译typescript、ES6等高级js语法 随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发， webpack可以将打包文件转换成浏览器可识别的js语法。 3、CSS预编译 webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的 语法编译成浏览器可识别的css语法。 webpack的缺点： 1、配置有些繁琐 2、文档不丰富
webpack基于node.js运行，首先需要安装node.js。 1.Node下载地址 2.选择安装目录 安装一直下一步即可，安装完检查path环境变量是否设置了 3.测试
node ‐v返回当前node版本
1.下载NPM node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本 2.设置包路径 包路径就是npm从远程下载的js包所存放的路径。 使用 npm config ls 查询NPM管理包路径 NPM默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules，为了方便对依赖包管理，我 们将管理包的路径设置在单独的地方，我设置在node.js的目录下，创建npm_modules和 npm_cache，执行下边的命令： 本教程安装node.js在D:\Program Files\nodejs下所以执行命令如下：
npm config set prefix "C:\Program Files\nodejs\npm_modules" npm config set cache "c:\Program Files\nodejs\npm_cache"webpack安装分为本地安装和全局安装： 本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。 全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个 项目。全局安装需要添加 -g 参数
1.本地安装： 在门户目录下
npm install --save-dev webpack 或 cnpm install --save-dev webpack npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)2.全局安装加-g，如下： 全局安装就将webpack的js包下载到npm的包路径下。
npm install webpack -g 或 cnpm install webpack -g3.安装webpack指定的版本： 本教程使用webpack3.6.0，安装webpack3.6.0： 进入webpacktest测试目录，运行： cnpm install --save-dev webpack@3.6.0 全局安装：(推荐)
npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g测试： 在cmd状态输入webpack，出现如下提示说明 webpack安装成功
1.定义model01.js 序使用的加法运算的js方法抽取到一个js文件，此文件就是一个模块
// 定义add函数 function add(x, y) { return x + y } // function add2(x, y) { // return x + y+1 // } // 导出add方法 export default add; // module.exports ={add,add2};//如果有多个方法这样导出 // module.exports.add2 = add2//如果有多个方法也可以这样导出2.定义main.js main.js是本程序的js主文件，包括如下内容： 1、在此文件中会引用model01.js模块 2、引用vue.min.js（它也一个模块） 3、将html页面中构建vue实例的代码放在main.js中。
//导入model01 //var {add}=require("./model01") import add from'./model01'; var Vue=require("./vue.min") var vm=new Vue({ el:'#app', //vm接管app区域的管理 data:{ name:'哈哈', num1:0, num2:0, result:0, url:"http://www.xuecheng.com", size:80, list:[1,2,3,4,5], user:{uname:'itcast',age:10}, userlist:[ {user:{uname:'itcast',age:10}}, {user:{uname:'ithah',age:11}}, ] }, methods:{ change:function() { //调用需要this this.result=add(Number.parseInt(this.num1),Number.parseInt(this.num2)); } } })3.打包测试 1、进入程序目录（shift+右键可以在当然目录打开 powershell 与可以 cmd cd进入），执行webpack main.js build.js ，这段指令表示将main.js打包输出为 build.js文件 执行完成，观察程序目录是否出现build.js。 在html中引用build.js
<!DOCTYPE html> <html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF‐8"> <title>vue.js入门程序</title> </head> <body> <div id="app"> <!‐‐{{name}}解决闪烁问题使用v‐text‐‐> <a v‐bind:href="url"><span v‐text="name"></span></a> <input type="text" v‐model="num1">+ <input type="text" v‐model="num2">= <span v‐text="result"></span> <!‐‐{{num1+num2}}‐‐> <!‐‐<input type="text" v‐model="result">‐‐> <button v‐on:click="change">计算</button> <!‐‐ 在Vue接管区域中使用Vue的系统指令呈现数据 这些指令就相当于是MVVM中的View这个角色 ‐‐> </div> </body> <script src="build.js"></script> <script> </script> </html>webpack-dev-server开发服务器，它的功能可以实现热加载 并且自动刷新浏览器。 创建一个新的程序目录，这里我们创建webpacktest02目录，将webpack入门程序的代码拷贝进来，并在目录下创 建src目录、dist目录。 将main.js和model01.js拷贝到src目录。
1.安装webpack-dev-server 使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。
2、配置webpack-dev-server 在package.json中配置script
{ "scripts": { "dev": "webpack-dev-server --inline --hot --open --port 10000" }, "devDependencies": { "html-webpack-plugin": "^2.30.1", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }–inline：自动刷新 –hot：热加载 –port：指定端–open：自动在默认浏览器打开 –host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址
进入 目录下
npm run dev自动刷新只有在修改这个src中的文件时才刷新
1.在webpack.config.js中配置：
devtool: 'eval-source-map',2.在js中跟踪代码的位置上添加debugger
// 定义add函数 function add(x, y) { debugger return x + y }如果出现bug可以评论
