webpack
对比传统开发和工程化
以开发同一个功能为例，对比展示两种开发方式：
- A. 传统方式，不使用构建工具
- B. 工程化的方式，使用webpack
示意图对比
传统方式
所有的资源直接引到.html中去，你写起来简单，清晰，但是，别人抄起来也方便。
工程化
开发时，在源代码上写;
发布时，用工具（webpack）打包成目标代码（这里就已经加密了），再来去引入.html
明细对比
| 传统方式 | 工程化方式 | |
|---|---|---|
| 能否采用js模块化（在一个js中引入另一个js） | 不能 | 能 |
| js代码否能加密 | 不能 | 能 |
| css代码能否压缩 | 不能 | 能 |
| 是否支持css预编译语言 | 不能 | 能 |
小结
webpack是一个工具，引这个工具之后就可以改变开发方式 ( 传统开发 ----> 工程化开发 ) ，提升开发效率；
传统项目示例
假设有一个传统开发的项目，如何用工程化的方式来进行改造。
结构内容
创建三个文件index.html,index.js,tool.js，整体的项目结构是：
|-yourproject/
|---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
// 封装一个工具函数
// 把给指定id的元素设置内容
const updateDom = (id, content) =>{
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的引用之前。如下整个代码的示意图：
小结
上面的代码中有如下问题：
- js文件之间有先后的引用的关系：由于index.js中引用了tool.js的，所以必须要把tool.js放在index.js的前面。
- 存在变量污染的情况：一个文件中定义的变量，在另一个文件中可能会被修改，覆盖。
- 随着.js文件个数增加，则项目会越来越不好管理。
- 不能采用模块化(一个js中引入另一个js)的技术进行开发。
- import , export
webpack基本介绍
在前面的传统项目中，我们抛出了一些问题，并且提到引入一个特别的工具：webpack来解决这个问题。
webpack是一个现代 JavaScript 应用程序的*
静态模块打包器(module bundler)*。
它的核心思想是：一切皆模块，模块可打包。
与webpack业务相关，具有相关竞争力的产品还有：
但是整体来看，在前端开发中，webpack所占绝对优势：vue, react, angular三大前端框架都依赖于webpack来做打包的。（用这个三个框架来开发项目，都离不开webpack）
如何在项目中引入并使用webpack
上面我们讲了两个点：1 传统项目有缺点； 2. 可以用webpack来解决这些问题。
接下来，我们来学习如何在项目中使用webpack。
基本步骤
- 用npm 对项目进行初始化并安装webpack。
（要先有项目，然后再用webpack来优化开发） - 改造目录结构，以享受零配置的好处
- 小幅度修改代码，以模块化的方式来改写代码
- 用webpack对源文件（js）进行打包，生成目标文件
- 在html文件中引入打包之后的目标
初始化项目
如果是已有项目，则直接npm init
node 是一个环境；
npm 是与node捆绑的一个工具，用来下载npm包
webapck 是基于node环境的一个工具， 它必须在node环境下才能运行， 如果你的电脑上没有安装node，webpack是无法运行的。
如果之前没有创建项目，则任意新建一个空文件夹，例如，取名为webpack-demo，进入到文件夹内部，用如下命令来生成一个package.json
npm init -y
在项目中安装webpack
考虑到不同的项目中可能使用了不同的webpack版本，这里采用本地（局部）安装的方式。复习一下本地安装和全局安装的区别。
npm i XXXX -g # 全局安装
npm i xxxx # 本地安装 不加-g
安装webpack
npm i [email protected] [email protected] -D
-------------------------------------------
+ [email protected]
+ [email protected]
added 392 packages from 220 contributors in 33.984s
tip： 如果你不额外指定要安装包的版本，它一定会给安装最新的。在2020.10.10，webpack出到了5，由于其它的插件没有及时跟上，所以现在用4还是比较稳的。
- 在安装包的时，如果加上 -D ，表示这个包是开发依赖， 如果不加，则默认是生产依赖。
开发依赖: 假设你现在建房子，你需要用到 挖掘机。这个 挖掘机 就是开发依赖（房子做好之后，就不用了，过河拆桥）。
生产依赖: 假设你现在建房子，你需要用到 电线，水管。这个 电线，水管 就是生产依赖（房子做好之后，还要用的）。
如果你看到如上所示的输出内容，就表示安装已经成功了。同时，也可以在node_modules下观察。
检查是否安装成功
# 方式一：
node_modules\.bin\webpack -v
# 方式二：
npx webpack -v
注意：
-
项目的名字不能取
wepback -
由于webpack并不是全局安装的，所以并不能直接使用
webpack -v来做检验。 -
npx是npm5.2之后提供的新功能。它在运行时会在
node_modules/.bin中去检查命令是否存在。
调整代码结构
这一步并不是必须的，只是为了享受 开箱即用 （webpack零配置） 的好处。
做一件事：把三个文件代码放在名为src的目录下
|-package.json
|-src
|--index.html
|--index.js
|--tool.js
调整目录结构之后，在src下就有了一个名为index.js的文件，在后续的操作中，我们就可以享受零配置的好处了。
由于webpack默认支持src目录，所以目录名只能是src。
修改代码内容
下面的内容会用到export , import的写法，它们是es6的模块化的语法，是配套使用的。
当然， 你也可以用nodejs中的module.exports和require这种写法来做模式化。
以模块化的方式来写代码，具体做两个改动：
- 在tool.js中导出模块
- 在index.js中使用模块
tool.js
它用来提供一个方法，把这个方法导出，以供其它模块来使用，具体代码如下：
const updateDom = (id, content) =>{
document.getElementById(id).innerHTML = content
}
+ export {
+ updateDom
+ }
index.js
在index.js中引入tool.js中 导出的方法。注意，这里已经涉及到了在一个js中引用另一个js
+ import { updateDom } from './tool'
updateDom('app','index.html')
tip: 由于现在在index.js使用了require这种模块化的处理方式，所以它无法直接在浏览器中使用，如果直接在index.html中引用，
浏览器会报错。
我们接下来就需要使用webpack命令来对index.js进行处理了。
webpack打包
webpack4.x提出了零配置打包的口号：不需要写任何的配置文件，就可以对代码进行打包。当然，它有一个前提：在根目录下有src/index.js这个文件。
打包命令是：
npx webpack
# 或者是
node_modules/.bin/webpack index.js
如果没有遇到错误，会看到类似的结果如下：
它说明打包操作已经成功：index.js和tool.js已经合成了一个main.js文件了。
两个.js文件合成了一个.js：好处是，减少一次浏览器的请求；
可以使用模块化了： 好处是，写代码会更加方便。
示意如下：
引入打包后的js
把上面打包完成的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>
好的，现在你已经可以看到这个代码可以正常工作了吧。
下面是示例图。
小结
- webpack可以帮助我们改进前端开发方式；
- 是基于nodejs的，在使用它之前要初始化项目，并局部安装webpack（不同的项目，采用的可能是不同的版本）。
- 它支持零配置打包：默认打包的入口是src/index.js
- 它支持模块化的写法：js文件之间存在相互引用关系(import , export)。
- 它能把多个存在引用关系的js打包成一个文件后，默认打包后会放在dist/main.js中。
- 打包的命令是：
npx webpack
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！