webpack是什么、为什么选择它
# webpack是什么、为什么选择它
# Webpack 是什么
本质上，webpack 是一个现代 JavaScript 应用程序的_静态模块打包器(module bundler)_ 。当 webpack 处理应用程序时，它会递归地构建一个_依赖关系图(dependency graph)_ ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack 将左侧错综复杂的各自不同类型文件的模板依赖关系，包括 .js、.hbs、.cjs、.sass、.jpg、.png 等类型文件，打包成 .js、.css、.jpg、.png 4 种类型的静态资源。
简单来说，webpack 就是一个静态资源打包工具，负责将项目中依赖的各个模块，打包成一个或多个文件。
# 为什么选择 Webpack
模块化开发
在没有各个 webpack 搭建的脚手架（create-react-app、vue-cli 等等）之前，我们通过在 HTML5 文件里引入一个个 Javascript 文件来进行开发，这就可能导致并行请求数量过多、存在重复代码等问题。
而通过 webpack，我们可以使用 import、require 来进行模块化开发。
在 webpack 中一切皆模块，js、css、图片、字体都是模块，而且支持静态解析、按需打包、动态加载、代码分离等功能，帮助我们优化代码，提升性能。
新语法
Javascript、CSS 的语法规范在不断更新，但是浏览器的兼容性却不能同步的更新，开发者可以通过 webpack 预处理器进行编译，自由的使用 JS、CSS 等语言的新语法。
webpack 使用 loader[5] 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源，如 Less、Sass、ES6、TypeScript。
通过预处理器将 TypeScript 编译成 JavaScript、SCSS 编译成 CSS、ES6 编译成 ES5 等。
开发者还可以使用 Node.js 轻松编写自己的 loader。
常用预处理器：
babel-loader使用 Babel 加载 ES2015+ 代码并将其转换为 ES5；less-loader加载并编译 LESS 文件；sass-loader加载并编译 SASS/SCSS 文件；postcss-loader使用 PostCSS 加载并转换 CSS/SSS 文件。
主流框架脚手架
Vue 脚手架 vue-cli、React 脚手架 creact-react-app、Taro 脚手架 taro-cli 都是使用 webpack，开发者掌握 webpack 后，可以自由配置脚手架，根据项目需要，调整 webpack 配置，以提高项目性能。
其他
还有以下优点：
- 拥有依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置；
- webpack 扩展性强，插件机制完善，开发者可自定义插件、loader；
- webpack 社区庞大，更新速度快，轮子丰富；
如使用 ant-design 搭建的中后台项目，ant-desgin 提供了 webpack 定制主题的相关文档，较其他打包工具定制起来就简单很多，易上手。
因为 webpack 的这些优点，大部分的大型项目会选择 webpack 进行项目构建。