webpack入门（一）

绝地灬酷狼 2022-06-17 05:27 158阅读 0赞

如今的网站正在演化为web应用程序:   
1. 越来越多的使用JavaScript。   
2. 现代浏览器提供更广泛的接口。   
3. 整页刷新的情况越来越少，甚至更多代码在同一个页面。（SPA）

因此有很多代码在客户端!   
一个体量庞大的代码库需要好好组织。模块系统提供代码库划分成模块的选项。

## 模块系统风格 ##

目前有多个标准定义依赖和输出：   
1. script标签（不要模块系统）   
2. CommonJS   
3. AMD和它的一些变种   
4. ES 6   
5. 其它

### script 标签的样式 ###

下面这种就是不用模块系统，你会怎么去管理你的代码。

模块接口导出到全局对象,即`window`对象。模块的接口可以访问全局对象的依赖关系   
常见问题

**全局冲突**   
**严重依赖加载的顺序**   
**开发人员必须人工解决模块/库的依赖关系**   
**大型项目，script一溜下来可以很长,难以管理**

### CommonJs: 同步加载 ###

这种风格用同步require 的方法去加载一个依赖并用暴露一个接口。 一个模块可以通过给`export`对象添加属性或给`module.exports`设置值 来指定导出。

require("module");
    require("../file.js");
    exports.doStuff = function() {};
    module.exports = someValue;
     
      
       1
       2
       3
       4

服务器端node.js用的就是这种标准。   
优点:   
1. 服务器端模块可以重用   
2. 已经有许多模块用这种风格(npm)。生态圈良好   
3. 非常简单和容易使用。   
劣势   
1. 阻塞调用不适用网络。网络请求是异步的。   
2. 没有并行加载机制。   
哪些在用？   
1. 服务端 -node.js   
2. browserify   
3. modules-webmake -编译到一个包   
4. wreq -客户端

### AMD: 异步加载 ###

其它模块系统（例如 浏览器） 同步加载有困难(CommonJS) 而引入的一个异步版本（和定义模块和输出值的一种方法 ）。

require(["module", "../file"], function(module, file) { /* ... */ });
    define("mymodule", ["dep1", "dep2"], function(d1, d2) {
      return someExportedValue;
    });
     
      
       1
       2
       3
       4

优点:   
1. 适合网络的异步请求的风格   
2. 并行加载多个模块。   
劣势   
1. 编码费力，更难读和写   
2. 看起来只是权宜之计。   
哪些在用？   
1. require.js   
2. curl

### ES6模式 ###

ES6借鉴其它语言给javascript新加了一些语法结构，有import语法。

import "jquery";
    export function doStuff() {}
    module "localModule" {}
     
      
       1
       2
       3

优点:   
1. 静态分析很容易。   
2. 不会过时的ES标准 。   
劣势   
1. 浏览器支持需要时间。（迟早的事）   
2. 很少有模块用这种风格。生态圈   
目前没有公开的方案

开发者应当自己选择适合自己的风格。允许现有的代码和包能正常工作，可以很容易地添加自定义模块风格。

## 传输 ##

模块应该在客户端执行,所以他们必须从服务器传输到浏览器。   
传输模块有两个极端:   
1. 一个一个地传。   
2. 全部打包在一个里传。

两种用法都泛滥，但是两种都太low了。

一个一个地传   
优点：只有确实需要的模块才会传输过去。   
缺点：许多请求意味着很多开销。   
缺点：应用程序启动缓慢,因为请求延迟   
全部一个地传   
优点：请求的开销更少,更少的延迟   
缺点：很多暂时不需要的模块给传输过去了。

### 分块传输 ###

更灵活的传输可能会更好。大多数情况下在这两种极端之间的折中比较好。   
=>在编译所有模块时：把模块切分成小块儿（chunks）。   
这样允许多个更小、更快的请求。有些模块不是一开始就需要的，含有这些模块的分块在需要的时候可以加载到。这样加快了初始化速度，但是在需要用那些模块时仍然让你去抓更多的代码。

开发者怎么做“切分点”，可以根据情况自由抉择。   
=》一个代码库是可能的哟。

注意：这些观点来自谷歌 GWT.

## 怎么可能只有javascript ##

为什么一个模块系统只能帮程序猿们解决javascript问题呢？还有许多其他资源需要处理:   
样式表   
图片   
web字体   
html模板   
等等

或者 一些预编译和后编译语言   
coffeescript → javascript   
elm → javascript   
less 样式→ css 样式   
jade 模板→ javascript 生成 html   
i18n files → something   
等等

这些东西应该也像下面这样容易：

require("./style.css");
     
      
       1

require("./style.less");
    require("./template.jade");
    require("./image.png");
     
      
       1
       2
       3

## 静态分析 ##

当编译所有这些模块时,一个静态分析试图找到自己的依赖。   
传统上这只能找到简单的东西没有表达 。但是   
`require("./template/" + templateName + ".jade")` 这样是常见的结构。   
有些库是用一些不一样的风格写的。它们有些很奇怪（不可思议）。

### 策略 ###

聪明的解析办法允许现存代码能跑起来，如果程序猿用了一些怪异的东西，它能试图找到兼容的解决方案。

# 什么是webpack #

webpack是一个模块打包器。webpack把模块(s)连同它的依赖一起打包生成包含这些模块的静态资源。

## 为什么另用一个打包器？ ##

现有的模块打包器不适合大项目（大单页面应用）程序。代码分割和静态资源无缝模块化的迫切需求，催生了一个新的模块打包器。   
我试图扩展现有的模块打包器，但是它没能实现所有的目标。   
目标如下：   
1. 把依赖树切分成块，实现按需加载。   
2. 保持低初始加载时间   
3. 每个静态资源都能是一个模块   
4. 具备把第三方库集成为模块的能力   
5. 具备打包器每个部分几乎都能自己定制的特点。   
6. 适合大型项目。

## webpack有什么不同？ ##

### 代码分割 ###

webpack依赖树中有两个依赖类型：同步和异步。异步模块切分成一个新的的块。在块树（chunk tree）优化之后，文件会为每个chunk发文件。

### loader ###

webpack可以处理javascript本身，但loader用来将其它资源转换为javascript。这样以来，所有资源都被格式化成模块了。

### 智能解析 ###

webpack有一个智能解析器，它能处理几乎所有的第三方库。它甚至允许你在依赖中你像这样加表达式 `require("./templates/" + name + ".jade")` 。它可以处理最常见的模块化标准风格：CommonJS和AMD。

# 安装 #

### node.js ###

安装node.js   
包管理工具 npm会一起装上。

### webapck ###

webpack 可以用用npm 命令来装