Webpack 4正式发布了!

时间: 2018-02-27阅读: 3566标签: webpack

webpack 4(Legato)正式发布了!你可以使用 yarn 或者 npm 获得它: 

yarn add webpack --dev

或者

npm i webpack --save-dev


为什么叫 Legato?

首先我们会开始一个新传统:为我们以后的每个大版本设定代号!因此,我们决定将命名这个特权给予我们最大的 OpenCollective 捐赠者:trivago

当我们向其发出请求后他们是这么回复我们的:

[在 trivago] 我们通常以音乐主题来命名我们的项目。例如,我们之前的 js 框架叫 “Harmony”,我们的新框架叫“Melody”。php 的话我们使用基于 Symfony 上层封装,我们叫它“Orchestra”。Legato 意味着毫无间隙地连续演奏每个节奏。 这点和 Webpack 很像,Webpack 将我们的前端资源(jscss甚至更多)无间隙的打包在一起。因此我们相信 “Legato” 这个代号会适合 Webpack。 ——  Patrick Gotthardt

我们得知后也非常地激动,因为新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。非常感谢过去的这些年 trivago 对 webpack 的无私捐赠支持,更感谢其为 webpack 4 命名!


有什么更新?

webpack 4 有太多的新东西可以说了,但是我不可能在本文中列举所有的内容,否则这篇文章就要推迟很久才能发布了。因此下面我会和大家分享一些我觉得有趣的更新内容,如果大家想要看所有的更新的话可以查阅 webpack 4 的更新日志


webpack 4 更快(速度提升98%)!

我们在社区中请求大家对 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!!这里给大家分享一下某个用户的测试结果:



来源: Twitter

当然这只是一部分用户的测试数据,你可以在我的推文的回复中查看他们所有的结果。

性能测试过程中也发现了一些 loader 的 bug 我们已经及时修复了!!PS: 我们还没有实现多进程,或者缓存功能(计划在v5版实现)。所以理论上我们的性能还有非常大的提升空间!!!!

构件速度是我们此次发布最主要的目标。你可以把所有的功能都添加到工具中,但是如果不能节省开发时间那你加这些功能又有什么用呢?当然以上的这些都是部分示例,我们非常欢迎大家在推特上使用#webpack #webpack4 开头提交你们的构建时间报告。


Mode, 零配置以及默认值

我们为 webpack 新增了一个 mode 配置项。Mode 有两个值:development 或者是 production,默认值是 production。Mode 是我们为减小生产环境构建体积以及节约开发环境的构建时间提供的一种优化方案。

如果想要了解更多 mode 配置项的内容,大家可以看看我们之前的一篇文章: webpack 4: mode 和优化

另外,entry,output 这些配置项也都有默认值了。这意味着你不需要每次都配置它们了,当然包括 mode。这可能意味着从现在开始,你的配置文件在我们做出如此巨大改变之后会变得非常小!

Legato 意味着毫无间隙地连续演奏每个节奏。

另外,我们提供零配置平台来扩展。webpack 最大的一个特色就是可扩展性。最终我们实现的零配置平台会是什么样子呢?当我们实现了 webpack presets 功能后,这意味着你可以基于零配置平台配置你自己,公司,甚至是社区的工作流配置用以继承直接使用。


再见 CommonsChunkPlugin

在新版中我们废弃并移除了 CommonsChunkPlugin,并且使用一些默认值以及更容易被复写的新 API optimize.splitChunks 来代替它。现在你可以在大部分场景中享受自动分块带来的便利了!

https://v.qq.com/iframe/player.html?vid=y0559vc6zin&tiny=1&auto=1

如果想要了解更多该 API 可以查看这篇文章:webpack 4: 代码分块以及分块优化


WebAssembly 支持

Webpack 现在默认支持在任何本地 WebAssembly 模块中的 import 和 export 语句。这意味着你可以直接在 Rust, C++, C 或者其它 WebAssembly 支持语言中使用 import。


模块类型简介以及 .mjs 支持

之前,JS 一直都是 Webpack 唯一的一等模块类型。当用户不需要使用 css/html 的时可能会造成一些麻烦。我们基于新的 API 抽象实现了 JS 类型。目前,我们已经支持5种模块类型实现:

  • JavaScript/auto: _(webpack 3 默认值)_ 所有的 JS 模块规范都可用:CommonJS,AMD,ESM
  • JavaScript/esm:EcmaScript 模块规范,其它的模块规范都不可用 (.mjs 文件的默认值)
  • javascript/dynamic: 仅支持 CommonJS 和 AMD,EcmaScript 模块规范不可用
  • json: JSON 数据,使用 require 和 import 导入 JSON 数据时可用 (.json 文件的默认值)
  • webassembly/experimental: WebAssembly 模块 (.wasm 文件的默认值,目前还是试验阶段)
  • 另外 webpack 支持直接查找 .wasm, .mjs, .js 和 .json 后缀文件

最让人激动的是,我们甚至可以支持 CSS 和 html 模块类型(计划在 webpack 4.x - 5 间版本实现)。 它将允许我们直接将 HTML 作为入口文件!


如果你正在使用 HtmlWebpackPlugin

在发布之前我们预留了一个月的时间 来升级所有的插件和 loader 以适配 webpack 4 的 API。然而,Jan Nicklas 因为工作原因没办法参加,因此我们不得不发布了一个 html-webpack-plugin 的 fork 版。你可以使用如下命令安装它:

$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

当 Jan 本月底从海外工作回来时,我们会将我们的更新合并回 jantimon/html-webpack-plugin 仓库中!在此之前,如果你有任何问题,可以提交到这里

如果你是插件或 loader 的开发者,你可以查看我们的迁移指南:webpack 4: 插件/loader 迁移指南


还有!

还有更多的特性没有在本文列出,我们强烈建议大家去看一下我们的官方更新日志


v4 的文档在哪?

我们马上要完成迁移指南和v4 的文档了。你可以访问 文档仓库 切换到 next 分支来获取更新情况,当然能搭把手帮个忙是再好不过了!


 各框架 cli 工具支持怎么样了?

在过去的一个月我们也为每个框架的脚手架工作确保它们能支持 webpack 4。甚至最流行的库例如 lodash-es, RxJS 已经支持 sideEffects 选项,因此使用它们的最新版后你会发现打包体积会大幅度的减小。

AngularCLI 团队已经计划在近几周即将发布的大版本中直接使用 webpack 4!如果你想要知道最新进展,可以直接联系他们,并询问他们你能帮什么忙而不是直接询问它什么时候发布


接下来?

我们已经在着手计划下一个版本 webpack 4.x 和 5 的特性了,包括但不限于:

  • ESM 模块导出支持
  • 持久缓存
  • WebAssembly 支持从 experimental 升级为 stable 稳定版。并增加 tree-shaking 和未使用代码去除!
  • Presets —— 基于零配置设计,任何东西都能支持零配置
  • CSS 模块类型——支持 CSS 作为入口文件(再见吧 ExtractTextWebpackPlugin)
  • HTML 模块类型——支持 HTML 作为入口文件
  • URL/文件 模块类型
  • 自定义模块类型
  • 多线程
  • 重新定义我们的组织章程和计划任务
  • Google Summer of Code (之后单独写文说明!!!)

再次感谢

对于我们的贡献者团队,核心团队,loader 和插件作者,那些第一次提交他们的提交,或者帮助解决故障的人:我们不能不感谢你们。这个产品是为你而生的,你们帮助塑造了它


2018 我们将注定要抛弃老古董思维,迎接 JS 的美丽复兴!

我之前已经多次强调过,在 JS 复兴 的今天,没有社区的帮忙,webpack 是不会变的如此强大,可持续以及蓬勃的生长。如果没有你们的帮助,webpack 可能现在也还只是另外一款普通的构建工具[Yet Another Build Tool (YABT)]而已。

via: https://medium.com/webpack/webpack-4-released-today-6cdb994702d4
译者:lizheming。翻译来源:http://www.zcfy.cc/article/x1f3bc-webpack-4-released-today-webpack-medium


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/445

18个webpack插件总有一款适合你的

何为插件(Plugin)?专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。Plugin 是一个扩展器,它丰富了 webpack 本身,针对是 loader 结束后,webpack 打包的整个过程

如何写 Webpack 配置文件

本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。

一步一步webpack,webpack的学习入门

webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。

WebPack中Plugins的使用和整理,以及常用的Plugins插件

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件

浅谈webpack优化

由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相关的优化知之甚少

webpack 从入门到放弃

随着前端项目复杂程度越来越高,依赖也越来越多,为了提高项目中代码的可复用性,前端开始提出模块化开发的思路,前端模块化会有以下几个痛点:命名冲突,文件依赖,代码复用

Vue -- webpack 项目自动打包压缩成zip文件

这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了。

在webpack自定义配置antd的按需加载和修改主题色

最近使用antd来做react项目的UI。从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下:加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less,根目录添加config-overrides.js,修改npm script即可, 一切正常

webpack3 升级 webpack4踩坑记录

安装webpack4最新版本;这个在webpack3中,webpack本身和它的CLI是在同一个包中,webpack4中将两个分开管理。记得添加mode用来告知 webpack 使用相应环境的内置优化

webpack—url-loader 解决项目中图片打包路径问题

刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里。下面我们就来分析下在webpack项目中图片的应用场景。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!