现在的前端，出现很多种可以提高开发效率的工具和框架，但是源码却不能直接运行，只有通过转换之后才能正常运行。
那么构建就是把源码转化为可以执行的JavaScript、HTML和CSS代码。
构建包含：
- 代码转换【比如typescript编译为JavaScript，scss编译为CSS】；
- 文件优化，比如压缩JavaScript，压缩合成图片；
- 代码分割，提取公共代码，提取首页不需要执行的代码让它异步加载；
- 模块合并，把模块分类合并成一个文件；
- 自动刷新，监听本地源码的变化，自动重新构建、刷新浏览器；
- 代码校验
- 自动发布。
webpack
webpack是一个打包模块化JavaScript的工具，通过loader转换文件，通过Plugin注入钩子，最后输出文件。
webpack专注于构建模块化项目。优点是：
- 能做到开箱即用，一步到位；
- 通过Plugin扩展，灵活
- 使用的场景广泛
- 社区活跃，可以找到很多场景下的开源扩展
- 有良好的体验
webpack也有缺点，就是只能用于采用模块化开发的项目。
webpack配置
1、 首先安装webpack和webpack-cli；
2、 创建基础的JavaScript文件盒HTML，代码如下：
index.html：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="root"></div><script src="./dist/bundle.js"></script>
</body></html>
工具函数的JavaScript文件index.js:
function show(content){window.document.getElementById("root").innerText = "Hello，" + content
}module.exports = show;
main.js代码如下：
const show = require("./index");show("Webpack");
package.json配置如下：
"scripts": {"build": "webpack"},
webpack的配置文件webpack.config.js如下：
const path = require("path");
module.exports = {entry:"./main.js",output:{filename:"bundle.js",path:path.resolve(__dirname,"./dist")}
}
执行命令：yarn build，在浏览器中打开index.html文件，页面会显示：“Hello，Webpack”
执行命令后，文件夹下会生成一个dist文件夹，dist就是就是编译后的静态代码。
执行打包命令后，webpack从entry的配置文件开始，识别出源码中的模块化导入语句，递归地找出入口文件的依赖，然后进行打包。
这就是webpack基本的打包流程。
