对比展示两种开发方式：
A. 传统方式，不使用构建工具B. 工程化的方式，使用webpack传统方式
工程化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YxLGpYYy-1603365659315)(asset/image-20200923214455667.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ov8z8R9l-1603365659319)(asset/image-20200923215317260.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8H1sfsxO-1603365659323)(asset/image-20200923215310572.png)]
webpack是一个工具，引这个工具之后就可以改变开发方式，提升开发效率；
在招聘广告中也有所涉及；
剧透：在vuecli中已经集成了这个工具；
webpack是是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
它是基于nodejs，所以本机一定要先安装了node。
webpack是用来对已有项目进行打包，所以一定是在某个项目下进行应用打包。
vuecli中集成了webpack ，当我们运行npm run build时，就是在调用webpack!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F6ytGJ2B-1603365659328)(asset/image-20200730215205425.png)]
打包：.less, .vue,.js … -------打包------> 静态的文件，让浏览器能认识。
创建三个文件index.html,index.js,tool.js，最后的项目结构是：
|-index.html |-index.js |-tool.js拷贝如下素材:
index.html
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <div id="app"> </div> <!-- 引入两个js文件 --> <script src="./tool.js"></script> <script src="./index.js"></script> </body> </html>tool.js
const updateDom = (id, content) =>{ window.document.getElementById(id).innerHTML = content }index.js
updateDom ('app','index.html')说明：
在一个html中引入多个js文件，并且要注意它们的顺序关系。script代码在body的底部，这样可以确保是dom节点渲染在js代码执行之前。因为在index.js要用到tool.js的功能，所以还在index.html中同时引用了index.js和tool.js，并把tool.js的引用放在index.js的引用之前。如下整个代码的示意图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5S2bNGi1-1603365659330)(asset/image-20200401122055300.png)]
上面的代码中有如下问题：
js文件之间有先后的引用的关系：由于index.js中引用了tool.js的，所以必须要把tool.js放在index.js的前面。存在变量污染的情况：一个文件中定义的变量，在另一个文件中可能会被修改，覆盖。随着.js文件个数增加，则项目会越来越不好管理。不能采用模块化(一个js中引入另一个js)的技术进行开发。由于webpack这个工具是在node环境中运行的，所以要使用它，必须提前安装nodejs。
基本步骤是：
用npm 对项目进行初始化；安装并使用webpack。（要先有项目，然后再用webpack来优化开发）任意新建一个空文件夹，取名为webpack-demo，进入到文件夹内部，用如下命令来生成一个package.json
npm init -y考虑到不同的项目中可能使用了不同的webpack版本，这里采用本地安装的方式。
npm i XXXX -g # 全局安装 npm i xxxx # 本地安装 不加-g注意：
由于webpack并不是全局安装的，所以并不能直接使用webpack -v来做检验。npx是npm5.2之后提供的新功能。它在运行时会在node_modules/.bin中去检查命令是否存在。做一件事：把js代码放在名为src的目录下
-package.json -src --index.html --index.js --tool.js以模块化的方式来写代码，具体做两个改动：
在tool.js中导出模块在index.js中使用模块它用来提供一个方法，供其它模块来使用。
这里使用commonjs规范（就是node.js中的导出模块的方式）导出工具方法。
const updateDom = (id, content) =>{ window.document.getElementById(id).innerHTML = content } + module.exports = { + updateDom + }在index.js中引入tool.js中的定义的方法。注意，这里已经涉及到了在一个js中引用另一个js
+const { updateDom } = require('./tool') updateDom ('app','index.html')由于现在在index.js使用了require这种模块化的处理方式，所以它无法直接在浏览器中使用，如果直接在index.html中引用，浏览器会报错。
我们接下来就需要使用webpack命令来对index.js进行处理了。
webpack4.x提出了零配置打包的口号：不要写任何的配置文件，就可以对代码进行打包。
打包命令是：
npx webpack # 或者是 node_modules/.bin/webpack index.js如果没有遇到错误，会看到类似的结果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ZyZe2eT-1603365659333)(asset/image-20201021234717271.png)]
它说明打包操作已经成功：index.js和tool.js已经合成了一个main.js文件了。
两个.js文件合成了一个.js：好处是，减少一次浏览器的请求；
可以使用模块化了： 好处是，写代码会更加方便。
示意如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BxKgA0Kl-1603365659335)(asset/image-20200401155011032.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ERRKDesn-1603365659339)(asset/image-20201021234813638.png)]
把上面打包完成的main.js引入到index.html
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <div id="app"> </div> <!-- 引入打包后的.js文件 --> <script src="../dist/main.js"></script> </body> </html>好的，现在你已经可以看到这个代码可以正常工作了吧。
下面是示例图。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WmQhFABV-1603365659340)(asset/image-20200401155445023.png)]
经可以看到这个代码可以正常工作了吧。
下面是示例图。
[外链图片转存中…(img-WmQhFABV-1603365659340)]
