导语: 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 里经过了优化。
另一个大的改变是webpack需要设置mode属性,可以是 development 或 production。
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
通过mode, 你可以轻松设置打包环境。如果你将 mode 设置成 development,你将获得最好的开发阶段体验。这得益于webpack针对开发模式提供的特性:
如果你将mode设置成了 production, webpack将会专注项目的部署,包括以下特性:
webpack4删除了CommonsChunkPlugin插件,它使用内置API optimization.splitChunks 和 optimization.runtimeChunk ,这意味着webpack会默认为你生成共享的代码块。其它插件变化如下:
WebAssembly(wasm)会带来运行时性能的大幅度提升,由于在社区的热度,webpack4对它做了开箱即用的支持。你可以直接对本地的wasm模块进行import或者export操作,也可以通过编写loaders来直接import C++、C或者Rust。
0CJS的含义是0配置,webpack4受Parcel打包工具启发,尽可能的让开发者运行项目的成本变低。为了做到0配置,webpack4不再强制需要 webpack.config.js 作为打包的入口配置文件了,它默认的入口为'./src/'和默认出口'./dist',这无疑对小项目而言是福音。
你所需要做的是在你的项目里包含 ./src/index.js 文件。当在命令行里执行 webpack 命令时,webpack会将该文件作为项目的入口文件进行打包配置。
webpack4对插件系统进行了不少修改,提供了针对插件和钩子的新API。变化如下:
更多关于新插件的工作原理可以参考: 新的插件系统是如何工作的?
已经有不少关于webpack5的计划正在进行中了,包括以下:
腾讯IVWEB团队的工程化解决方案feflow已经开源:Github主页:https://github.com/feflow/feflow
如果对您的团队或者项目有帮助,请给个Star支持一下哈~