需要解决的一些问题
Webpack 最初的目标是实现前端项目的模块化,旨在更高效地管理和维护项目中的每一个资源
从后端渲染的JSP、PHP,到前端原生JavaScript,再到jQuery开发,再到目前的三大框架Vue、React、Angular
开发方式,也从javascript到后面的es5、es6、7、8、9、10,再到typescript,包括编写CSS的预处理器less、scss等
现代前端开发已经变得十分的复杂,所以我们开发过程中会遇到如下的问题:
- 需要通过模块化的方式来开发
- 使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑,通过sass、less等方式来编写css样式代码
- 监听文件的变化来并且反映到浏览器上,提高开发的效率 JavaScript 代码需要模块化,HTML 和 CSS
- 这些资源文件也会面临需要被模块化的问题 开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化
webpack
1. 定义: webpack 是一个用于现代JavaScript应用程序的静态模块打包工具
2. 静态模块: 这里的静态模块指的是开发阶段,可以被 webpack 直接引用的资源(可以直接被获取打包进bundle.js的资源)
当 webpack处理应用程序时,它会在内部构建一个依赖图,此依赖图对应映射到项目所需的每个模块(不再局限js文件),并生成一个或多个 bundle
3.webpack的能力:
- 编译代码能力,提高效率,解决浏览器兼容问题
- 模块整合能力,提高性能,可维护性,解决浏览器频繁请求文件的问题
- 万物皆可模块能力,项目维护性增强,支持不同种类的前端模块类型,统一的模块化方案,所有资源文件的加载都可以通过代码控制