Web 前端工程化实践 - Webpack、Rollup 打包优化、模块化规范应用
一、Web 前端工程化概述
前端工程化是指利用工具和技术提高前端开发效率、降低维护成本、提升项目质量的过程。它涵盖了项目构建、模块化、打包优化、自动化部署等方面，其中 Webpack 和 Rollup 作为前端工程化的重要工具，为我们提供了强大的能力。
二、模块化规范应用
模块化规范可以让我们将复杂的代码拆分成多个模块，使代码更易维护、复用和扩展。目前主要有 CommonJS、AMD、CMD、ES6 Module 四种模块化规范，其中 ES6 Module 是目前官方推荐的规范，也是未来的趋势。它通过 import 和 export 关键字来声明模块的导入和导出，清晰明了。
三、Webpack 打包优化
是一个模块打包工具，可以将各种资源视为模块，通过 loader 和 plugin 对其进行处理和优化，最终生成生产环境可以使用的静态资源。在实际项目中，我们可以利用 Webpack 的代码分割、Tree Shaking、缓存、懒加载等功能来优化项目的打包效果，提高页面加载速度和用户体验。
举例：
在上面的例子中，我们配置了 entry 入口文件和 output 输出文件，同时使用了 optimization 进行代码分割，将第三方库分离打包，利用 contenthash 实现文件缓存。
四、Rollup 打包优化
是一个 ES6 模块打包工具，由于其面向未来的特性使得它在打包 ES6 模块方面具有更好的效果。与 Webpack 不同的是，Rollup 更适合用来构建库和工具，它可以将我们的代码打包成适合在浏览器环境中直接使用的格式。
举例：
在上面的例子中，我们配置了 input 入口文件和 output 输出文件，同时使用了 terser 插件进行代码压缩。
综上所述，Web 前端工程化实践是一个复杂的系统工程，其中模块化规范应用、Webpack 和 Rollup 打包优化是其中非常重要的一部分。通过合理应用这些工具和技术，我们可以提升前端开发效率、优化项目性能，为用户提供更好的使用体验。
