一、什么是webpack
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
二、webpack版本
Webpack v1.0.0 --- 2014.2.20
编译、打包(Commonjs AMD)、HMR (模块热更新)、代码分割、文件处理
Webpack v2.2.0 --- 2017.1.18
Tree Shaking、ES module、动态 Import、更友好的文档
Webpack v3.0.0 --- 2017.6.19
Scope Hoisting (作用域提升)、Magic Comments
Webpack v4.0.0
最新版本
三、 webpack的四大核心概念
1、入口(entry)
Entry：
代码的入口，打包的入口，可以是单个也可以是多个。配置：
2、输出(output)
Output：
打包生成的文件，可以是一个也可以是多个。配置：
3、 加载器(loader)
Loaders:
处理文件转为模块。配置：
常用loader：
- 编译相关
babel-loader、ts-loader- 样式相关
style-loader、css-loader、less-loader、postcss-loader- 文件相关
file-loader、url-loader4、插件(plugins)
Plugins:
参与打包整个过程,打包优化和压缩文件等。配置：
常用 Plugins
- 优化相关
CommonsChunkPlugin，UglifyjsWebpackPlugin- 功能相关
ExtractTextWebpackPlugin，HtmlWebpackPlugin
HotModuleReplacementPlugin ，CopyWebpackPlugin四、三个引申概念
1、Module
discrete chunks of functionality that provide a smaller surface area
than a full program. well-written modules provide solid abstractions
and encapsulation boundaries which make up a coherent design and clear
purpose
分散的功能块，提供比完整程序更小的表面积。编写良好的模块提供了坚实的抽象和封装边界，构成了一致的设计和明确的目的。
2、Chunk
this webapck-specific term is used internally to manage the bundling
process. bundles are composed out of chunks,of which there are several
types(e.g. entry and child). typically,chunks dirctly correspond with
the output bundles how
ever,there are some configurations that don’t yield a one-to-one relationship
这个webapck专用术语用于内部管理捆绑过程。包是由块组成的，其中有几种类型(例如:条目和孩子)。通常，块与输出束紧密地对应，但是有一些配置不会产生一对一的关系。
3、Bundle
produce from a number of distinct modules, bundles contain the final
versions of source files that have already undergone the loading and
compilation process
来自多个不同模块的产品，包含已经过加载和编译过程的源文件的最终版本。