Webpack 4正式发布了!

时间: 2018-02-27阅读: 2790标签: 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 后缀文件

最让人激动的是,我们甚至可以支持 csshtml 模块类型(计划在 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

webpack 前后端分离开发接口调试解决方案,proxyTable解决方案

如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法,请查阅其文档。在 localhost:3000 上有后端服务的话,你可以这样启用代理

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

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

webpack3 升级 webpack4踩坑记录

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

手把手教你写一个 Webpack Loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效模块,以供应用程序使用,以及被添加到依赖图中。

最全的webpack.base.config.js文件中文注释

引入utils文件,此处主要用到了assetsPath()方法,用来根据开发模式或生产模式来使用config文件下的相应配置,引入config文件夹下index.js,使用打包或开发配置

《深入浅出webpack》有感

nodejs的出现对于构建工具具有重要的意义,在没有nodejs之前,js只能执行在浏览器环境下,所以意味着对发布前的js文件要进行处理,十分局限,没有打包工具,只能用PHP脚本来处理文件

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

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

如何写 Webpack 配置文件

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

webpack 阶段回顾 之 webpack-dev-server

webpack-dev-server是一个让我们可以模拟线上环境进行项目调试的工具,主要功能有:路径重定向、浏览器中显示编译错误、接口代理 如解决跨域、热更新

webpack output

output输出口必须是个对象,因为它必须有两个属性:filename输出出去的文件的名字,一般都是bundle.js,path文件要输出出去到哪里,一般都是dist文件,那如果我们是多页面引用,那上面这个输出就不行了

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广