文章第一句话为“这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

学习Webpack的原因

• 学习Webpack，了解什么是前端“工程化”；
• 学习Webpack，提高自己的核心竞争力，从而更好在团队中任职；
• 现在很多对“工程化”要求高的工程，都会用到Webpack；
• 高阶前端必经之路；

什么是Webpack?

前端项目由什么构成？

资源

结合前端项目的项目结构（仅仅针对我现在所写的，不涉及到其他人）看一下。

手动管理前端资源的弊端

• 当要引入的文件过多，例如需要引用50个js文件，过程繁琐；
• 当代码文件之间有依赖时，要严格按照依赖顺序来引入；
• 生产与开发环境一致，难以接入 TS 或 JS 新特性；
• 比较难接入 Less、Sass 等工具；
• JS、图片、CSS 等资源管理模型（管理手段）不一致；

以上这些对开发效率极大的拉低了。

于是，出现了

工程化工具

• Webpack
• Vite
• Gulp
• Grunt
• Browserify
• ...

Webpack的本质

一种前端资源编译、打包工具

Webpack可以分析项目结构，找到 JS 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss、TypeScript 等），并将其转换和打包为合适的格式供浏览器使用。

Webpack的优点

• 模块化

JavaScript代码、CSS、fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。

• 多份资源文件打包成一个 Bundle；
• 支持Babel、Eslint、TS、CoffeeScript、Less、Sass；

Webpack通过预处理器进行编译，自由使用JS、CSS的新特性。 Webpack通过 loader 对文件进行预处理，可以使用包括 JS 在内的任何静态资源，如Less、Sass等。

• 支持持续监听、持续创建；
• 拥有依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置；