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支持一下哈~

364 声望
29 粉丝
0 条评论
推荐阅读
webpack4 中如何实现资源内联?
HTML 内联 CSS,这个其实就是我们通常说的 内联 CSS 或者 行内 CSS。我们可以写几行 reset CSS,然后通过 style 标签的方式嵌入进了 HTML 里面:

cpselvis1阅读 3.7k

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城32阅读 7.3k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.2k评论 3

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.8k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20k评论 9

364 声望
29 粉丝
宣传栏