webpack是什么？

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。
chunk 代码块，bundle静态资源。

- 上面是比较官方的说法，那么什么是静态模块打包器？

Vue开发就是在一个文件中引入这个文件需要的所有资源，比如：样式资源，js资源，图片，字体等资源……，那么这些资源都要交给构建工具处理，我们首先告诉webpack一个入口文件，他会以这个入口文件作为起点文件打包，将每一个依赖都会记录好，形成树状依赖图。依次将资源引进来，进行编译打包生成静态资源。
如图：图片自己画的有点难看，请忽略颜值

• 什么又是构建工具呢？

我们使用ES6+来开发项目，使用less/sass/stylus等css预处理器来写样式，这些语法浏览器都无法识别，只能通过一个个小工具来翻译为浏览器能识别的语言，而这些小工具我们需要一个个来维护，很麻烦，所以提出了找一个大的工具，将这些小的工具的功能都包含起来，我们只要关心这个大的工具怎么使用就OK了。就是构建工具。
那webpack的主要工作都有什么呢？开发环境和生产环境的配置都有什么不同呢？

1. 开发模式工作：

1）源代码（包含ES6语法，less/sass文件）——> webpack ——> bundle文件，被浏览器运行。
2）自动化工作，自动打开浏览器，自动编译，自动刷新等，让开发效率更高。

2. 生产环境工作：

1） css—>js导致js文件很大，需要从js中提取出来。
2） 对代码进行压缩
3） 样式和部分js代码有兼容性问题，比如：样式的css3针对不同浏览器加前缀等
4） 代码更快，性能更好，更平稳的运行

这些如果放到开发环境中，运行会很慢，不利于开发。

总结：

1. webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。
2. 不能编译打包 css、img 等文件
3. 在webpack看来一切都是模块，包括javascript代码，css和fonts以及图片等等，只有通过合适的loaders，都可以被当作模块处理。并且webpack提供了拆分代码后异步加载的方式，即先加载某个主模块，以后按需加载。
4. 消除对未引用资源的依赖。
5. dev-server：自动打开浏览器，实现代码的热编译。