webpack4新特性介绍

导语: webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件。借助loaders和plugins，它能够改变、压缩和优化各类各样的文件。它的输入是不一样的资源，好比：js、css、图片、字体和html文件等等，而后将它们输出成浏览器能够正常解析的文件。

当下最流行的模块打包器 webpack 于2018年2月25日正式发布v4.0.0版本，代号legato。从官方的 发布日志 来看, 本次大版本更新带来了不少新特性更新和改善，这将会让webpack的配置更加简单。本文，笔者将会全面介绍webpack4的新特性及实践。

环境支持

在发布日志里的 Big changes 板块，官方宣布不在支持Node 4, Node 6 使用的是v8 5.0版本，支持93%的ES6语法。不难看出，这个决定是为了更好的利用ES6语法的优点，来编写出更加整洁和健壮的代码。

备注：当使用webpack4时，确保使用 Node.js的版本 >= 8.9.4。由于webpack4使用了不少JS新的语法，它们在新版本的 v8 里通过了优化。

mode 属性

另外一个大的改变是webpack须要设置mode属性，能够是 development 或 production。

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}
复制代码

经过mode, 你能够轻松设置打包环境。若是你将 mode 设置成 development，你将得到最好的开发阶段体验。这得益于webpack针对开发模式提供的特性：

• 浏览器调试工具
• 注释、开发阶段的详细错误日志和提示
• 快速和优化的增量构建机制

若是你将mode设置成了 production, webpack将会专一项目的部署，包括如下特性：

• 开启全部的优化代码
• 更小的bundle大小
• 去除掉只在开发阶段运行的代码
• Scope hoisting和Tree-shaking

插件和优化

webpack4删除了CommonsChunkPlugin插件，它使用内置API optimization.splitChunks 和 optimization.runtimeChunk，这意味着webpack会默认为你生成共享的代码块。其它插件变化以下:

• NoEmitOnErrorsPlugin 废弃，使用optimization.noEmitOnErrors替代，在生产环境中默认开启该插件。
• ModuleConcatenationPlugin 废弃，使用optimization.concatenateModules替代，在生产环境默认开启该插件。
• NamedModulesPlugin 废弃，使用optimization.namedModules替代，在生产环境默认开启。
• uglifyjs-webpack-plugin升级到了v1.0版本, 默认开启缓存和并行功能。

开箱即用WebAssembly

WebAssembly(wasm)会带来运行时性能的大幅度提高，因为在社区的热度，webpack4对它作了开箱即用的支持。你能够直接对本地的wasm模块进行import或者export操做，也能够经过编写loaders来直接import C++、C或者Rust。

支持多种模块类型

webpack4支持5种模块类型：

• javascript/auto: 在webpack3里，默认开启对全部模块系统的支持，包括CommonJS、AMD、ESM。
• javascript/esm: 只支持ESM这种静态模块。
• javascript/dynamic: 只支持CommonJS和AMD这种动态模块。
• json: 只支持JSON数据，能够经过require和import来使用。
• webassembly/experimental: 只支持wasm模块，目前处于试验阶段。

0CJS

0CJS的含义是0配置，webpack4受Parcel打包工具启发，尽量的让开发者运行项目的成本变低。为了作到0配置，webpack4再也不强制须要 webpack.config.js 做为打包的入口配置文件了，它默认的入口为'./src/'和默认出口'./dist'，这无疑对小项目而言是福音。

你所须要作的是在你的项目里包含 ./src/index.js 文件。当在命令行里执行 webpack 命令时，webpack会将该文件做为项目的入口文件进行打包配置。

新的插件系统

webpack4对插件系统进行了很多修改，提供了针对插件和钩子的新API。变化以下：

• 全部的hook由 hooks 对象统一管理，它将全部的hook做为可扩展的类属性。
• 当添加插件时，必须提供一个插件名称。
• 开发插件时，能够选择sync/callback/promise做为插件类型。
• 能够经过this.hooks = { myHook: new SyncHook(...) } 来注册hook了。

更多关于新插件的工做原理能够参考: 新的插件系统是如何工做的？

Webpack5展望

已经有很多关于webpack5的计划正在进行中了，包括如下：

• 对WebAssembly的支持更加稳定
• 支持开发者自定义模块类型
• 去除ExtractTextWebpackPlugig插件，支持开箱即用的CSS模块类型
• 支持Html模块类型
• 持久化缓存

最后

腾讯IVWEB团队的工程化解决方案feflow已经开源：Github主页：https://github.com/feflow/feflow

若是对您的团队或者项目有帮助，请给个Star支持一下哈～