Webpack 4正式发布了!

更新日期: 2018-02-27阅读: 5.3k标签: 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 将我们的前端资源(JS,css甚至更多)无间隙的打包在一起。因此我们相信 “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


链接: https://fly63.com/article/detial/445

浅谈Webpack打包工具的应用

webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。

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

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

如何写 Webpack 配置文件

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

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

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

大多数项目中会用到的webpack小技巧

webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。

优化Webpack构建性能的几点建议

Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。

Vue中使用webpack别名的方法

Vue中使用webpack别名的方法,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况。而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径。那么该怎么办呢?

点击更多...

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