webpack入门（一）——webpack 介绍

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

所以有不少代码在客户端!
一个体量庞大的代码库须要好好组织。模块系统提供代码库划分红模块的选项。

模块系统风格

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

script 标签的样式

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

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

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

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

CommonJs: 同步加载

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

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

服务器端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. 并行加载多个模块。
劣势
1. 编码费力，更难读和写
2. 看起来只是权宜之计。
哪些在用？
1. require.js
2. curl

ES6模式

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

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

优势:
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");
2 require("./template.jade");
3 require("./image.png");

静态分析

当编译全部这些模块时,一个静态分析试图找到本身的依赖。
传统上这只能找到简单的东西没有表达 。可是
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 命令来装

$ npm install webpack -g

webpack 已经全局安装了，如今 webpack 命令可用了。

项目中使用webpack

你的项目最好也有webpack 依赖。 这样你能够在项目中自由决定用webpack哪一个版本而必去用全局那个webpack。
用 npm 命令添加一个 package.json文件

$ npm init

若是你不发布npm包，Init过程当中的问题不重要，均可以忽略。
安装webpack 并添加到package.json中：

$ npm install webpack --save-dev

版本

有两个webpack版本可用。稳定版本和beta版。beta版 在版本字符中标记为 -beta 。beta版本可能包含脆弱的或者实验功能，都没进行过多少测试。正式场景下应该用稳定版。

$ npm install webpack@1.2.x --save-dev

开发工具

若是你想用开发工具，先安装它

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

 

 

原文地址：http://blog.csdn.net/keliyxyz/article/details/51571386