【第二届字节青训营 - 寒假前端场】「Webpack 知识体系」の学习笔记

Webpack的作用

• 理解前端“工程化”概念、工具、目标
• 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
• 高阶前端必经之路

以前存在的问题

-当代码文件之间有依赖的时候，就得严格按依赖顺序书写
-开发与生产环境一致，难以接入TS或JS新特性
-比较难接入Less、Sass 等工具-JS、图片、CSS资源管理模型不一致

Webpack

前端资源编译打包工具

作用：

• 多份资源文件打包成一个Bundle
• 支持Babel、Eslint、TS、CoffeScript、Less、Sass
• 支持模块化处理css、图片等资源文件
• 支持HMR+开发服务器
• 支持持续监听、持续构建
• 支持代码分离
• 支持Tree-shaking
• 支持Sourcemap