构建工具与打包

构建工具的作用

1. 支持模块化开发：在浏览器中是无法直接使用commonjs和es模块化开发的，通过构建工具能直接从node_module里引入代码，并且支持模块化开发
2. 处理代码兼容性：通过构建工具能实现比如babel降es版本，less转css，ts转js等语法转换（这其实并不是构建工具具体实现的，构建工具只是将这些语法对应的处理工具集成进来，实现自动化处理）
3. 提高项目性能：通过构建工具能实现文件压缩，代码分割等
4. 优化开发体验：
   • 构建工具能实现自动监听文件的变化，当文件变化以后自动调用对应的集成工具进行重新打包，然后浏览器重新运行看到新的变化效果（热更新，hot replacement）
   • 处理跨域问题：在开发服务器时，构建工具还能帮助解决跨域问题

总结：

• 构建工具能让我们可以不用每次都关心我们的代码在浏览器如何运行，减少开发的负担。
• 只需要在开始的时候给构建工具提供一个配置文件（这个配置文件也不是必需的，如果不手动提供，会使用默认的去处理），有了这个集成的配置文件后，在下次需要更新的时候调用一次对应的命令就可以了，如果再结合热更新，只需要在启动命令，更新时不再需要再手动调用命令，实现自动更新。

打包

将我们写的浏览器不认识的代码，交给构建工具进行编译处理的过程就叫作打包，打包以后会给我们一个浏览器可以认识的文件