A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through “loaders,” modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, … and your custom stuff
webpack简介 - 图1

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle

Webpack V1

编译、打包
HMR (模块热更新) ,
代码分割 ,
文件处理

Webpack V2

Tree Shaking
ES module
动态 Import (动态函数),
新的文档

Webpack V3

Scope Hoisting (作用域提升)
作用域提升(Scope Hositing )是 Webpack 3 的标志性特征,老版本的 Webpack 需要将每个模块包裹在单独的函数闭包中以实现模块系统。而这些封装函数往往会使得浏览器中运行的 JavaScript 代码性能有所下降;而 Closure Compiler、RollupJS 这些构建工具则会将代码中所有的模块作用域连接到单一闭包中,从而保证了浏览器中的代码运行速度。

Magic Comments (配合动态import使用)
可以指定webpack打包后的名字的命名

webpack V4

webpack4 中 cli 工具分离成了 webpack 核心库 与 webpack-cli 命令行工具两个模块,需要使用 CLI,必安装 webpack-cli 至项目中,

可以查看迁移指南https://dev.to/flexdinesh/upgrade-to-webpack-4—-5bc5
http://coderlt.coding.me/2018/04/12/webpack4/