webpack是什么？有什么用？

webpack 是什么？webpack 又有什么用？本篇文章将来给大家介绍一下 webpack 的含义以及 webpack 的使用方法，有需要的朋友可以看一看，希望对你有所帮助。
话不多说，我们直接进入正题~

webpack 是什么？

  我们从官网上可以知道：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

  简单的来说，WebPack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

webpack 有什么用？

我们先来简单说一下 webpack 的工作原理：
  在一个配置文件中，指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体，通过一个给定的主文件（index.js），webpack 将从这个文件开始找到你的项目的所有的依赖文件，使用 loaders 处理他们，最后打包为一个浏览器可以识别的 js 文件。

webpack 的理念就是一切皆模块化，把一堆的 css 文件和 js 文件放在一个总的入口文件，通过 require 引入，剩下的事情 webpack 会处理，包括所有模块的前后依赖关系，打包、压缩、合并成一个 js 文件，公共代码抽离成一个 js 文件、某些自己指定的 js 单独打包，模块可以是 css / js / imsge / font 等等。

webpack 的用法

1、webpack 可以根据模板生成 HTML，并自动处理上面的 css / js 引用路径；

2、webpack 可以自动处理里面的图片路径，css 里面背景图的路径，字体引用；

3、webpack 可以开启本地服务器，一边改写代码，一边自动更新页面内容；

4、webpack 可以编译 jsx、es6、sass 、less、coffescript 等，并添加 md5、sourcemap 等辅助；

5、webpack 可以异步加载内容，不需要时不加载到 DOM；

6、webpack 可以配合 vue.js 和 react.js 等框架开发。

---

转载自 php中文网 不言 的文章 webpack是什么？有什么用？

---

若要进一步了解 webpack，可参考：
  ① meahu 的博文 入门Webpack，看这篇就够了
  ② webpack 官方文档 webpack
  ③ 我的另一篇博文 webpack 中，module，chunk 和 bundle 的区别是什么？