前端工程化产生的原因:在浏览器端,开发时态(devtime)和运行时态(runtime)的侧重点是不一样的
开发时态(devtime)
- 模块划分越细越好
- 支持多种模块化标准
- 支持 npm 或其他包管理器下载的模块
- 能够解决工程化的问题
运行时态(runtime)
- 文件越少越好
- 文件体积越小越好
- 代码内容越乱越好
- 所有浏览器都兼容
- 能够解决其他运行时的问题,主要是执行效率的问题
这种差异在小项目中表现的并不明显,可以一旦项目形成规模,久越来越明显,如果不解决这些问题,前端项目形成规模只能是空谈
既然开发时态和运行时态面临的局面有巨大差异,就是开发时候期望是一种代码结构,运行时期望的是另一种代码结构
因此,我们需要有一个工具,这个工具能够让开发者专心的在开发时写代码,然后利用这个工具将开发时态编写的代码转换为运行时需要的东西
这样的工具,叫做构建工具
webpack 特点
- 为工程化而生:webpack 致力于解决前端工程化,特别是浏览器工程化中遇到的问题,让开发者集中注意力编写业务代码,而把工程化过程中的问题全部交给 webpack 处理
- 简单易用:支持零配置,可以不用写任何一行而外的代码就使用 webpack
- 强大的生态:webpack 是非常灵活,可以扩展的,webpack 本身的功能并不多,但它提供了一些可以扩展某功能的机制,使得一些第三方库可以融入到 webpack 中
- 基于 node.js:由于 webpack 在构建的过程中需要读取文件,因此它是运行在 node 环境中的
- 基于模块化:webpack 在构建过程中要分析依赖关系,方式是通过模块化导入语句进行分析,它支持各种模块化标准,包括但不限于 CommobJS、ES6、Module