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

webpack4新特性介绍的更多相关文章

  1. dubbox新特性介绍

    dubbx是当当网对原阿里dubbo2.x的升级,并且兼容原有的dubbox.其中升级了zookeeper和spring版本,并且支持restfull风格的远程调用. dubbox git地址:  h ...

  2. Hadoop3.0新特性介绍,比Spark快10倍的Hadoop3.0新特性

    Hadoop3.0新特性介绍,比Spark快10倍的Hadoop3.0新特性 Apache hadoop 项目组最新消息,hadoop3.x以后将会调整方案架构,将Mapreduce 基于内存+io+ ...

  3. jdk7和8的一些新特性介绍

    jdk7和8的一些新特性介绍 本文是我学习了解了jdk7和jdk8的一些新特性的一些资料,有兴趣的大家可以浏览下下面的内容. 官方文档:http://www.oracle.com/technetwor ...

  4. ArcGIS 10.3 for Desktop新特性介绍

    ArcGIS 10.3是一个完整公布的ArcGIS平台,它包含新的产品(ArcGIS Pro),针对10.2版本号产品进行了功能增强和稳定性的改进. ArcGIS 10.3 for Server新特性 ...

  5. Xcode9新特性介绍-中文篇

    背景: Xcode 9 新特性介绍: 1.官方原文介绍链接 2.Xcode9 be ta 2 官方下载链接 本文为官方介绍翻译而来,布局排版等都是按照官方布局来的. 与原文相比,排版上基本还是熟悉的配 ...

  6. php7函数,声明,返回值等新特性介绍

    使用 ... 运算符定义变长参数函数 (PHP 5 >= 5.6.0, PHP 7) 现在可以不依赖 func_get_args(), 使用 ... 运算符 来实现 变长参数函数. functi ...

  7. webpack 4.0.0-beta.0 新特性介绍

    webpack 可以看做是模块打包机.它做的事情是:分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式 ...

  8. MyBatis 3.5.2 新特性介绍

    1.MyBatis 最新版本 3.5.2 发布 MyBatis最新版本是:3.5.2,发布时间是:2019年7月15日 2.MyBatis 3.5.2 新特征介绍 我们知道,MyBatis 是支持定制 ...

  9. Java 11 新特性介绍

    Java 11 已于 2018 年 9 月 25 日正式发布,之前在Java 10 新特性介绍中介绍过,为了加快的版本迭代.跟进社区反馈,Java 的版本发布周期调整为每六个月一次——即每半年发布一个 ...

随机推荐

  1. 初版python计算器

    作业: 使用正则表达式实现计算器功能. 实现: 1.实现带括号的计算 2.实现指数.加减乘除求余等功能 先看运行结果: 请输入您的计算式: 1 - 2 * ( (60-30 +(-40.0/5) * ...

  2. Linux内核开发之将驱动程序添加到内核

    驱动程序添加到内核 一.概述: 在Linux内核中增加程序需要完成以下三项工作: 1.将编写的源代码复制到Linux内核源代码的相应目录 2.在目录的Kconfig文件中增加新源代码对应项目的编译配置 ...

  3. java中的mvc和三层结构究竟是什么关系

    一件事,要知其然往往很简单,要知其所以然通常不是那么容易,就如最近重新巩固spring的过程中,就觉得还有许多问题其实并不是十分明了. 屈指一算,手头上做过的正式项目也有了四五六七个了,不管用的数据库 ...

  4. 笔记+R︱信用风险建模中神经网络激活函数与感知器简述

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 本笔记源于CDA-DSC课程,由常国珍老师主讲 ...

  5. R语言︱分布函数与概率密度+随机数产生

    1.常见概率分布 ##正态分布 pnorm(1.96) #P(x<=1.96)时的分布概率 pnorm(1.96,0,1) #上同 pnorm(1.96,lower.tail = F) #P(x ...

  6. Java获取当前的日期和时间

    Java获取当前的日期和时间 1.具体实现方法如下 /** * @Title:DateTime.java * @Package:com.you.model * @Description:获取当前的日期 ...

  7. strstr()函数实现

    /* 函数要求:写一个函数模拟strstr()函数,设计中不得使用其他库函数. 函数原型:const char *strstr(const char *str1,const char *str2); ...

  8. VxWorks启动过程详解(下)

    上一节主要是从映像的分类和各种映像的大致加载流程上看VxWorks的启动过程,这一节让我们从函数级看一下VxWorks的启动过程: 1. Boot Image + Loadable Images: 下 ...

  9. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  10. 【BZOJ4569】萌萌哒(并查集,倍增)

    [BZOJ4569]萌萌哒(并查集,倍增) 题面 BZOJ 题意: 有一个长度为\(n\)的数 给定\(m\)个限制条件 每次限制\(l1-r1\)与\(l2-r2\)是相同的 求出方案数 题解 如果 ...