现在的前端，出现很多种可以提高开发效率的工具和框架，但是源码却不能直接运行，只有通过转换之后才能正常运行。
那么构建就是把源码转化为可以执行的JavaScript、HTML和CSS代码。
构建包含：
代码转换【比如typescript编译为JavaScript，scss编译为CSS】；
文件优化，比如压缩JavaScript，压缩合成图片；
代码分割，提取公共代码，提取首页不需要执行的代码让它异步加载；
模块合并，把模块分类合并成一个文件；
自动刷新，监听本地源码的变化，自动重新构建、刷新浏览器；
代码校验
自动发布。
基础
webpack
webpack是一个打包模块化JavaScript的工具，通过loader转换文件，通过Plugin注入钩子，最后输出文件。
webpack专注于构建模块化项目。优点是：
能做到开箱即用，一步到位；
通过Plugin扩展，灵活
使用的场景广泛
社区活跃，可以找到很多场景下的开源扩展
有良好的体验
webpack也有缺点，就是只能用于采用模块化开发的项目。
webpack配置
1、 首先安装webpack和webpack-cli；
2、 创建基础的JavaScript文件盒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>
扫一扫
3494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
