webpack

webpack是一个现代的JavaScript应用的静态模块打包工具

🚩webpack

webpack是一个现代的JavaScript应用的静态模块打包工具

• 模块
• 打包

📍前端模块化

模块化：模块可以理解为把代码拆分成独立的代码块或文件，每个块能实现特定的功能；然后各自封装，隔离和组织这些模块。

在ES6之前的模块加载器：CommonJS、ADM、CMD、UDM

• CommonJS：同步加载，适用于服务器，node、webpack使用
• ADM（Asynchronous Module Definition），异步模块定义，以浏览器为目标执行环境，实现核心为用函数包装模块定义，异步加载，浏览器使用，实现的requireJS想兼容服务器和浏览器，预加载
• CMD（Cmomon Module Definition），通用模块定义，异步加载，专注于浏览器，实现的是seaJS，使用时加载
• UMD（Universal Module Definition），通用模块定义，AMD和commonJS的结合，可以服务端使用也可以浏览器使用

​ JavaScript文件、css、图片、JSON等等都可以被当作模块使用

​ webpack可以让我们进行模块化开发，并且会帮助处理模块间的依赖关系，将其进行整合打包

📍打包

​ webpack中的各种资源模块可以打包成一个或多个包，在打包过程中会对资源进行处理，比如压缩图片，将SCSS转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等操作

webpack与grunt/gulp的对比

• grunt/gulp 也被称为前端自动化任务管理工具，其核心是Task，我们可以配置一系列的 task，并且定义 task 要处理的事务（例如 ES6、ts 转化，图片压缩，scss 转成 css）之后让 grunt/gulp 来依次执行这些 task，而且让整个流程自动化
• webpack 更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能