webpack系列译文(1)

翻译的目的:之所以想到翻译,是因为公司需要用webpack构建,另外一点就是希望练习自己的英文水平,反正我觉得意义很大。因为本人英语水平有限,翻译有不当之处,可以在评论处加以指正,谢谢大家。


原文链接:

http://webpack.github.io/docs/what-is-webpack.html


译文是:

what  is  webpack?

modules with dependencies ---webpack---> static assets


 我的翻译是

现在打包工具这么多,为何要选择另一个打包工具?

当下的打包工具都不太适应于大型项目。webpack最紧要解决的问题是模块化开发和静态资源处理。虽然我尝试着将现有的很多打包工具做扩展,但是都达不到我想要的效果。


目标
把依赖树拆分成块加载的需求
保持初始加载时间低
每一个静态的资产应该是一个模块
把第三方图书馆作为模块的能力
自定义的模块式的几乎每一个部分的能力
适合大项目


为何webpack会不同


代码分离:

WebPACK在依赖树有两种类型的依赖关系:同步和异步。异步依赖作为分割点,形成一个新的块。在优化了块树后,每一块都有一个文件被释放。


Loader:

Loader是可以用于作用其他的静态资源,并每个资源形成一个模块


聪明的解析方式:

webpack可以调用任意第三方库,甚至还可以这么引用require("./templates/" + name + ".jade"),实现了其他第三方模块库的大量功能。


webpack插件:

webpack具有一个非常强大的插件库,而且你可以自定义插件或者配置你所需要的插件进行使用。


如何安装

先安装nodejs

nodejs会自带一个叫做npm的包管理工具

webpack

webpack就需要通过npm来安装:

$ npm install webpack -g
这样的话,webpack的全局命令就可以实现了


如何把webpack用于项目中呢?

最好在本地有一个webpack的依赖,这样的话你可以选择一个项目的webpack版本而且不需要使用全局的webpack来执行。

通过npm添加一个叫做package.json的配置文件:

$ npm init
这些问题的答案都不那么重要,如果你不想发布项目管理。

安装和添加webpack的时候带上:

$ npm install webpack --save-dev

版本

目前有两种版本WebPACK。稳定和测试版。该测试版在版本字符串中有一个测试版本。测试版可能的变更或实验的功能。看到更新的差异。对于严肃的东西,你应该使用稳定的版本:

$ npm install webpack@1.2.x --save-dev
如果需要webpack开发工具,请单独安装:

$ npm install webpack-dev-server --save-dev

使用


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值