背景

一般前端开发工程有以前要求：

• 模块化(js)
• 组件化(ui)
• 规范化
• 自动化(构建,部署,自动化测试)

为了要处理代码压缩混淆, 处理浏览器JavaScript的兼容性, 性能优化等问题，webpack的使用则非常适合。

前端工程化与webpack

前端工程化主要解决的问题：

• JavaScript、css 代码的合并与压缩
• CSS 预处理：Less、Sass、Stylus 的编译
• 生成雪碧图
• ES6 -> ES5
• 模块化等

webpack 的主要使用场景是单页面富应用（SPA），将一些诸如：typescript、less、jpg、vue等格式的文件通过特定的加载器（Loader）编译后，最终统一生成 .js、.css、.png等静态资源文件。

如何文件都可称为是一个模块。webpack就是处理模块间的依赖关系，并把他们进行打包。