概念

背景

最初的目标是 实现前端项目的模块化，更高效管理维护项目的每一个资源。

• 模块化：

  最初，会通过文件划分的形式实现模块化，将每个功能以及相关状态数据各自单独放在不同的 .js 文件中。约定每个文件是一个独立的模块，使用的时候再引入到页面中。

  这种模块的弊端非常明显，模块都是在 全局 中工作，存在大量模块的成员污染了环境，模块与模块之间没有依赖关系、维护困难、没有私有空间等问题。项目一旦变大，上述问题尤为明显。

  随后出现了 命名空间 的方式，规定每个模块只暴露一个全局对象，然后模块的内容都挂载在这个对象中。这种方式没有解决依赖问题。

  再后来，使用立即执行函数为模块提供私有空间，通过参数的形式作为依赖声明。

  以上都是早起解决模块的方式，但是仍然存在一些没有解决的问题。例如，使用过 script 标签在页面引入这些模块的，这些模块的加载并不受代码的控制，时间一久维护起来也十分的麻烦。

  最理想的方式是，在页面中引入一个 JavaScript 入口文件，其余用到的模块可以通过代码控制，按需加载。

  除了模块加载问题，还需要规定模块化的规范，目前流行的规范有：CommonJS、ES Module。

存在问题

现代前端开发可能会面临的问题：

• 需要通过模块化的方式开发；JavaScript 代码需要模块化，HTML 与 CSS 这些资源文件也会面临需要模块化的问题；
• 使用一些高级的特性提高开发效率。比如通过 ES6+、TypeScript 开发脚本逻辑，通过 Sass、Less 等方式编写 CSS 样式等；
• 监听文件的变化反映到浏览器上，提高开发效率；
• 开发完成之后需要将代码进行 压缩、合并以及其他相关的优化；

而 Webpack 能解决上面的问题。

Webpack 的理解

Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

• 静态模块：指的是开发阶段可以被 Webpack 直接引用的资源（直接被获取打包进 bundle.js 的资源）；

  Webpack 处理应用程序时，会在内部构造一个依赖图，此依赖图对应映射到项目所需的每个模块，不再局限 .js 文件，并生成一个或者多个 bundle ：

  

• Webpack 的能力：

  • 编译代码能力。提高效率，解决浏览器兼容问题；
  • 模块整合能力。提高性能，可维护性，解决浏览器频繁请求文件的问题；
  • 万物皆可模块能力。项目维护性强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件的加载都可以通过代码控制。

参考内容：

• webpack 官网 (https://webpack.js.org/)