概述
webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。下面一张图能更加形象的描述webpack：
webpack4.0新特性
2018年2月份webpack4.0发布，这跟之前版本的webpack相比，其中的配置及其他操作流程都发生了一定的变化，所以我们在接下来的文章中介绍新版的webpack4.0，所以，首先我们先来看看webpack4.0到底有哪些新特性：
1）环境支持
官方宣布不在支持node 4, node 6 ，支持93%的ES6语法。所以当使用webpack4.0时，确保使用 nodeJS的版本至少大于8.9.4。因为webpack4.0使用了很多JS新的语法，它们在新版本的v8里经过了优化。
2）mode 属性
webpack4.0需要设置mode属性，可以是 development 或 production。
通过mode, 你可以轻松设置打包环境。如果你将 mode 设置成 development，你将获得最好的开发阶段体验。这得益于webpack针对开发模式提供的特性：
1、浏览器调试工具
2、注释、开发阶段的详细错误日志和提示
3、快速和优化的增量构建机制如果你将mode设置成了 production, webpack将会专注项目的部署，包括以下特性：
1、开启所有的优化代码
2、更小的bundle大小
3、去除掉只在开发阶段运行的代码
4、Scope hoisting和Tree-shaking3）插件和优化
webpack4.0删除了CommonsChunkPlugin插件，它使用内置API optimization.splitChunks 和 ** optimization.runtimeChunk **，这意味着webpack4.0会默认为你生成共享的代码块。其它插件变化如下:
1、NoEmitOnErrorsPlugin 废弃，使用optimization.noEmitOnErrors替代，在生产环境中默认开启该插件。
2、ModuleConcatenationPlugin 废弃，使用optimization.concatenateModules替代，在生产环境默认开启该插件。
3、NamedModulesPlugin 废弃，使用optimization.namedModules替代，在生产环境默认开启。
4、uglifyjs-webpack-plugin升级到了v1.0版本, 默认开启缓存和并行功能。4）开箱即用WebAssembly
WebAssembly(wasm)会带来运行时性能的大幅度提升，由于在社区的热度，webpack4.0对它做了开箱即用的支持。你可以直接对本地的wasm模块进行import或者export操作，也可以通过编写loaders来直接import C++、C或者Rust。
5）支持多种模块类型
webpack4.0支持5种模块类型：
1、javascript/auto: 在webpack3里，默认开启对所有模块系统的支持，包括CommonJS、AMD、ESM。
2、javascript/esm: 只支持ESM这种静态模块。
3、javascript/dynamic: 只支持CommonJS和AMD这种动态模块。
4、json: 只支持JSON数据，可以通过require和import来使用。
5、webassembly/experimental: 只支持wasm模块，目前处于试验阶段。6）0CJS
0CJS的含义是0配置，webpack4.0受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。为了做到0配置，webpack4.0不再强制需要 webpack.config.js 作为打包的入口配置文件了，它默认的入口为'./src/'和默认出口'./dist'，这无疑对小项目而言是福音。
7）新的插件系统
webpack4.0对插件系统进行了不少修改，提供了针对插件和钩子的新API。变化如下：
1、所有的hook由 hooks 对象统一管理，它将所有的hook作为可扩展的类属性。
2、当添加插件时，必须提供一个插件名称。
3、开发插件时，可以选择sync/callback/promise作为插件类型。
4、可以通过this.hooks = { myHook: new SyncHook(...) } 来注册hook了。总结
本文简单介绍下webpack是什么以及webpack4.0的新特性，这些新特性在接下来的文章中我们会依次介绍，在此处大家有一个映像就可以。通过本文的阅读，大家需要知道的是：webpack是什么东西。文章介绍的比较简单，大家可以查阅其他的资料搞清楚我们接下来介绍的webpack到底是做什么的就可以。
