我当初为什么写webpack_Tobias Koppers

时间: 2018-04-17阅读: 995标签: webpack
原文链接: www.cross-platform-blog.com
翻译链接:https://www.zcfy.cc/article/interview-with-webpack-founder-tobias-koppers

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

Gregor:你好,Tobias,JavaScript社区都在谈论webpack,就连谷歌也已经把它集成到了自己的Angular CLI项目中了。很高兴webpack诞生于纽伦堡,离我的老家英戈尔施塔特(德国)不远。跟我们分享一下,你当时怎么想起来写webpack的,它怎么那么快就受到了大家欢迎的?

Tobias:你好,Gregor。实际上,谷歌也在参与webpack的开发,只不过是间接参与。我在迷上JavaScript以上,也写过Java。谷歌曾经推出过一个工具,叫GWT(Google Web Toolkit),让Java程序员能用Java编写客户端应用。GWT其实是一个Java应用到JavaScript SPA的编译器,也使用了谷歌的一些应用。

GWT有一个功能我研究了很长时间,就是代码拆分(code splitting)。这个功能可以延迟加载不常用的代码。对于要保持初始加载速度的大型应用,这个功能非常重要。但我没发现JavaScript的开源工具(2012年)中哪个具备这个功能,于是我就想写一个这样的工具,也就是webpack

换句话说,webpack诞生之初主要想解决代码拆分的问题。而在我看来,这也是webpack今天这么受欢迎的原因所在。随着Web应用越写越大,而移动设备越来越普及(但上网环境相对不好),拆分代码的需求与日俱增。如果不拆分代码,就很难实现期望的性能。

Gregor:很多人拿webpacknpm脚本、Grunt和Gulp等进行比较。有人也确实通过webpack实现那些工具的功能。我以后也会使用npm脚本和webpack。你对此怎么看,你除了webpack之外,还会用其他任务工具吗?

Tobias: npm脚本对我而言足矣。实际上,说webpack是Grunt/Gulp的替代器并不完全准确。Grunt和Gulp以及npm脚本都是任务执行程序。

Webpack是模块打包程序。这两类程序的目标不一样。但webpack简化了 必须“过度使用”Grunt和Gulp和npm脚本才能实现的Web开发任务也是事实。npm脚本才是Grunt和Gulp的替代品。

不过,除了纯粹的构建之外,任务运行程序也有存在的理由,比如部署、代码检查、版本管理,等等。

Gregor:在我的JavaScript培训课上,很多学员都说webpack上手有多难多难。有没有也人跟说这么说过?如果有,你有没有想过怎么改进?

Tobias: 有,确实有这样的反馈。不过,也有不少用户在会用以后还这么说。而实际上webpack使用起来很简单。只要会写网页,都会觉得它比之前的工具容易使用。

我认为这些反馈主要是因为webpack的概念与其他工具的概念明显不一样,特别是在把Grunt/Gulp迁移到webpack时。任务运行程序的配置是指令式的,描述的是每一步要执行什么任务。而Webpack的配置则是声明式的,就是说不会描述webpack要执行的步骤,而只描述执行这些步骤的方式或执行后的结果是什么样的。

Gregor: 你的开发日程是怎么安排的?下一个webpack的版本计划有什么功能?

Tobias: 现在还说不太好。很多事情都有可能,捡几个重要的说一下吧:

  • 作用域提升:连接模块的小却强大的方式
  • WebAssembly:支持Web应用中的二进制代码
  • 持久缓存:更快的初段编译
  • css(还有html)作为一类公民:对样式表(和html)的更多支持
  • 其他

用户和赞助者决定实现这些功能的优先级。我建了一个投票页面,大家可以去投。所有人都可以表达自己的想法,但赞助者和志愿者的权重更大。因为他们需要一定的回报。用户当然希望多多益善。

Gregor:能否推荐几个webpack最佳实践?

Tobias: 使用按需加载。非常简单,效果非常好。

Gregor:你个人有什么目标吗?我们会不会很快在媒体上看到,说你去谷歌去山景城了?

Tobias: 我不这样想。我很快会成为一个自由职业者。我会把更多的时间放到开源上来,通过捐助实现财务平衡。因为捐赠通常不够,我会接一些工作或咨询来弥补缺口。我很想知道这样行不行。也许有人会成为我的赞助商,提供额外几个星期的赞助(听见了吗,谷歌)。

维护一个开源项目需要付出的努力超出常人想象。现在,代码评审和解决issuse占了我80%时间。我既没足够的时间写代码,也没时间重构。甚至一些合并请求我都得拖上一段时间才能处理。我需要花时间仔细看一看。当然,志愿者并不想如此。我想这种情况会变的,只要我全职写webpack就行了。但愿我能有更多时间写更多代码

Gregor:非常感谢你接受采访!也感谢webpack,感谢它对JavaScript开发者的大力支持。非常喜欢你这个工具

Tobias: 不客气。我要感谢社区。Webpack并不是“我的”工具,它是500多位志愿者共同的成果。Webpacks成功也是源于这个伟大的生态。


站长推荐

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

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

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

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

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

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

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

postcss-loader有什么用?如何配置webpack让浏览器自动补全前缀

PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理

为什么要用webpack?

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化,让我们可以把复杂的程序细化为小的文件;

webpack是什么?

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

webpack 阶段回顾 之 webpack-dev-server

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

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

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

webpack项目轻松混用css module

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

Webpack有哪些常见的Loader?

这里其实没什么太大意义,无非是想请你们亲自去看看自己项目到底用了哪些loader而已, 下面简单列出一些。style-loader 将css添加到DOM的内联样式标签style里

webpack的optimization.namedModules

optimization.namedModules 这个配置对于调试起来很方便,比如原本生产的一段代码是长这样的:很多奇怪的数字,比如最后几行的 [0,0] 是表示了什么意思?如果配置上namedModules 为true呢

点击更多...

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

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

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