【 webpack系列（二）】一个基于CommonJS模块化方案的小demo —— 带你简单体验 webpack 打包流程

一. webpack基础

webpack —— JavaScript 应用程序的静态模块打包器（module bundler）。
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

下面来了解两个重要的概念：前端模块化开发和打包。

1.1 前端模块化开发

模块化是一种处理复杂系统分解为更好的可管理模块的方式。 所谓的模块化开发就是封装细节，向外暴露接口，彼此之间互不影响，每个模块都是实现某一特定的功能。

目前主流的前端模块化方案：

• CommonJS —— Node服务器
• AMD规范 —— 浏览器
• ES6 Module —— 通用方案

---

❀ 拓展一下❀

有关前端模块化开发三大方案的详细信息可以查阅上一篇 ——

【 webpack系列（一）】了解前端模块化开发三大方案 —— CommonJS + AMD + ES6 Module

---

传统模块化开发中我们还需要处理模块间的各种依赖，并且将其进行整合打包。后来webpack的出现帮助我们很好的完成了这部分工作，并且它做到的更多：

• 模块热更新；
• 自动编译浏览器不能直接识别的文件格式（Sass，TypeScript等）；
• 自动处理css兼容浏览器前缀；
• 自动生成HTML模板文件；
• 框架配合（Vue.js / React.js / Angular.js）；
• 打包优化，如代码分割，懒加载等；
• …

1.2 打包

打包的概念简单来说就是：把各种资源模块进行打包合并成一个或多个包(Bundle)。

并且在打包的过程中，webpack还可以对资源进行处理，比如压缩图片，将sass转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

Webpack的具体工作方式是：

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），webpack将从这个文件开始找到你的项目的所有依赖文件，使用对应的加载器（loaders）处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

二. webpack初体验

只要你了解过上述提到的前端模块化开发三大方案，就都知道浏览器环境下不支持CommonJS，所以就必须通过webpack的打包操作来转换成浏览器可识别的格式。

所以我们今天的webpack初体验就以此为基础，来感受使用webpack打包的魅力吧！

2.1 安装webpack

安装webpack需要使用Node.js环境下的包管理工具 —— npm。 全局安装的命令是：

npm install -g webpack

上述命令执行过程中会提醒你还需要安装webpack的脚手架，继续执行这句代码即可：