webpack系列译文（1）

àì夳堔傛蜴生んèń 2022-08-23 00:54 148阅读 0赞

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

原文链接：

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

译文是：

what  is  webpack？

![modules with dependencies ---webpack---> static assets][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

使用

[modules with dependencies ---webpack---_ static assets]: /images/20220722/ee76e0a3f6d6493fac7446d6bad586f1.png
[nodejs]: https://nodejs.org/en/

发表评论取消回复

表情：

评论列表（有 0 条评论，148人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack深入浅出实战系列

> 很多人都或多或少使用过 webpack，但是很少有人能够系统的学习 webpack 配置，遇到错误的时候就会一脸懵，不知道从哪查起？性能优化时也不知道能做什么，网上的优化教

朱雀/ 2023年07月03日 06:08/ 0 赞/ 163 阅读

相关《Windows程序设计第六版》译文：简介(1)

本篇为《Programming Windows, 6th Edition》译文，本人将一些琐碎之事写在译文之前，没看过的还请劳驾看一下[写在《Programming Windo

╰+攻爆jí腚メ/ 2022年12月27日 11:28/ 0 赞/ 168 阅读

相关 Webpack入门1----简介

webpack是什么 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js

亦凉/ 2022年10月04日 15:49/ 0 赞/ 203 阅读

相关 lwIP(V1.3.0)RAW_API译文

lwIP RAW TCP/IP接口作者: Adam Dunkels, Leon Woestenberg, Christiaan Simons lwIP为使用TCP/IP协

深碍√TFBOYSˉ_/ 2022年09月29日 06:06/ 0 赞/ 166 阅读

相关【Webpack 性能优化系列(1) - HMR 热模块替换】

webpack系列文章： [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -] [【Webpa

忘是亡心i/ 2022年09月09日 04:57/ 0 赞/ 293 阅读

相关 webpack 项目使用--创建webpack 项目（1）

1.新建一个文件夹假设文件夹的名称为 wdgapp，并且通过命令行到该目录下 ![20210805204946585.png][] 2. 初始化项目 npm

喜欢ヅ旅行/ 2022年09月03日 05:19/ 0 赞/ 266 阅读

相关 webpack 安装使用（1）

安装 1. 全局安装命令：cnpm install weback -g ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

叁歲伎倆/ 2022年08月30日 05:18/ 0 赞/ 230 阅读

相关 webpack系列译文（1）

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

àì夳堔傛蜴生んèń/ 2022年08月23日 00:54/ 0 赞/ 149 阅读

相关 webpack简单使用(1)

今天想了解一下webpack，但找了网上的一系列教程，都会或多或少出现一些不明报错，实在恼火，经过几番简化，终于用最简单的方法使用了webpack，在此记录一下一.环境配

港控/mmm°/ 2022年03月16日 11:04/ 0 赞/ 269 阅读

相关 Jmter组件译文之Controllers控制器译文

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L251bWJl

川长思鸟来/ 2021年09月29日 07:44/ 0 赞/ 316 阅读