Webpack

关于 Webpack 基础使用的整理 背景 网站由网页模式进化成 Webapp 模式 网站运行在高级浏览器中，使用 HTML5、CSS3、ES6 等新技术 webapp 通常是单页面应用（每一个视图通过异步方式加载，导致页面初始化和使用过程会加载更多的 js 代码） 前端开发基于多语言、多层次编码和组织工作，交付基于浏览器，需要保证代码和资源在浏览器端快速优雅的加载和更新，亟需模块化系统 传统方式 <script src="module1.js"></scrpti> <script src="module2.js"></scrpti> <script src="module3.js"></scrpti> ... 弊端 全局作用域（定义在 window 对象下）下易造成变量冲突 文件只能按照脚本引入的顺序加载 需要主观解决模块和代码库的依赖关系 大型项目中资源难以管理，长期积累导致代码库混乱不堪 CommonJS 服务端的 Node.js 遵循 CommonJS 规范 核心思想 允许模块通过 require 方法来同步加载要依赖的其他模块 通过 exports 或 module.exports 导出需要暴露的接口 require("module"); require("../file.js"); exports.doStuff = function() {}; module.exports = someValue; 优势 服务端模块便于重用 NPM 中已有大量可用模块包（20w） 简单易用 缺陷 同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的 不能非阻塞的并行加载多个模块 ES6 模块 ES6 标准增加了 js 语言层面的模块体系定义 ES6 的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。...