webpack用途：Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。
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基于node.js运行，首先需要安装node.js。
1、先去下载：
node.js官网下载地址：
https://nodejs.org/en/download/
推荐下载LTS版本
2、安装完成检查PATH环境变量是否设置了node.js的路径。
3、测试
运行cmd,输入node -v
会显示当前的版本号
安装NPM
具体的可以参照这篇文章
https://www.cnblogs.com/jianguo221/p/11487532.html
1、自动安装NPM
npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM
的功能和服务端项目构建工具maven差不多，我们通过npm 可以很方便地下载js库，打包js文件。
node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本
2、设置包路径
包路径就是npm从远程下载的js包所存放的路径。
使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）
node ‐v
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”
此时再使用 npm config ls 查询NPM管理包路径发现路径已更改
3、安装cnpm
npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像
下边我们来安装cnpm：
有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
输入命令，进行全局安装淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后，我们可以使用以下命令来查看cnpm的版本
cnpm -v
nrm ls 查看镜像已经指向taobao
1）本地目录下安装：将webpack的js包下载到项目下的npm_modeuls目录下。
在门户目录下创建webpack测试目录webpacktest01：
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 -g
3）安装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
测试：win + r输入cmd然后输入webpack，如果提示信息如下，则已经安装完成了。
vue_02.html
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue.js测试程序</title> <!-- <script src="vue.min.js"></script>--> </head> <body> <div id="app"> <a v-bind:href='url' >百度一下，你就知道</a> <!-- {{name}} <!–相当于MVVM的view部分–>--> <!-- <span v-text="name"></span>--> <!-- <span v-text='name'></span>--> <label> <input type="text" v-model="num1"/> + <input type="text" v-model="num2"/> </label> <span v-text="result"></span> <button v-on:click="change">计算</button> </div> </body> <script type="text/javascript" src="build.js"></script> </html>
model01.js
var add = function (x, y) { return x + y; }; var add2 = function (x, y) { return x + y + 2; }; module.exports.add = add;
main.js
var {add} = require('./model01.js'); var Vue = require('./vue.min.js'); var VM = new Vue({ el: "#app",//表示当前vue对象接管app的div区域 data: { name: '百度一下，你就知道',// 相当于是MVVM中的Model这个角色 num1: 0, num2: 0, result: 0, url: 'http://www.itcast.cn' }, methods: { change: function () { //这里使用了导入的model01.js文件中的add方法 this.result = add(Number.parseInt(this.num1), Number.parseInt(this.num2)); alert(this.result) } } });
这个是完成以后的目录结构：
然后在modulejs文件目录下，运行命令行窗口
输入webpack main.js build4.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7nEJe8za-1582427657465)(C:\Users\ZhouYanXiang\Desktop\picture\blog_Image\webpack\webpack打包.png)]
运行vue_02.html，运行结果如下：
在这个过程中遇到了一个坑：
我最开始把引入js的语句
<script type="text/javascript" src="build.js"></script>
放在了
里面
结果没有成功导入build.js文件，运行结果如下：
后来参考了这篇文章
https://www.cnblogs.com/xiangkejin/p/6411792.html
之后就搞清楚了
加载的顺序不一样，你可以把ＨＴＭＬ看成从上往下加载的。
例如在网速慢的情况下把ｊｓ代码放在ｂｏｄｙ底部用户会先看到网页结构，等ｊｓ加载完成后才出现特效
区别简述：
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载
