webpack is a module bundler.
  • 是一个模块管理器
  • webpack可以管理模块的依赖关系,并产生可以替代这些模块的静态代码
 

 
已有方案 V.S. Webpack
  • <script>:
    • <script src="module1.js"></script>
      <script src="module2.js"></script>
      <script src="libaryA.js"></script>
      <script src="module3.js"></script>
    • 冲突,加载顺序,依赖,长且难于管理
  • commonjs(同步):
    • require("module");
      require("../file.js");
      exports.doStuff = function() {};
      module.exports = someValue;
    • 网络同步请求块级调用不适用,多模块无法并行调用
    • 实践:nodejs,browerify,modules-webmake(编译成为一个bundle),wrep(客户端)
  • AMD(异步):
    • require(["module", "../file"], function(module, file) { /* ... */ });
      define("mymodule", ["dep1", "dep2"], function(d1, d2) {
      return someExportedValue;
      });
    • 适用于网络异步模型,多模块并行加载
    • 代码过重难于读写,更像是为了解决问题的变通方法
  • ES6 MODULES:
    • import "jquery";
      export function doStuff() {}
      module "localModule" {}
    • 易于静态分析,确认为未来的ES标准
    • 原生浏览器支持需要时间,仅有很少模块采用这种形式
  • webpack
    • 让开发者选择模块风格,允许已有代码正常运行,易于添加用户模块类型
 

模块转移方案:
  • 模块需要在客户端运行,所以模块需要从服务端转移到浏览器端
  • 两种极端的转移方法
    • 一个请求一个模块
      • 优点:仅请求需要的模块
      • 缺点:多模块请求次数过多
      • 缺点: 请求延时导致app打开过慢
    • 一个请求所有模块
      • 优点:请求次数减少,请求延时减少
      • 缺点:不能够按需请求
  • 模块组(chunked)转移:当编译所有模块时:将模块集合划分为多个小一些的模块组。
 

其他资源依赖管理支持:
  • 资源
    • 样式,图片,webfonts,html模板等
    • coffeescript,less样式表,jade模板,i18n文件
  • 解决方案: Using loaders 和 Loaders
 

静态分析:
  • 当编译全部模块的时候,静态分析系统会尝试找到对应依赖
  • 现状:通常该系统只能找到没有表达式的简单依赖,但是表达式方式确是很常见的require("./template/" + templateName + ".jade")
  • 解决方案:智能解析器允许大部分的已有代码正常运行,即使开发者做了什么奇怪的事情,解析器也会找到兼容性最好的解决方案。

以上内容翻译整理自 http://webpack.github.io/docs/motivation.html

webpack模块依赖管理介绍的更多相关文章

  1. javascript 模块依赖管理的本质

    模块模式定义 模块是'javascript'的一种设计模式,它为函数定义一个包装函数,并且该包装函数的返回值与模块的API保持一致: function createModule() { functio ...

  2. 玩转IDEA项目结构Project Structure,打Jar包、模块/依赖管理全搞定

    前言 你好,我是A哥(YourBatman). 如何给Module模块单独增加依赖? 如何知道哪些Module模块用了Spring框架,哪些是web工程? IDEA如何打Jar包?打War包? 熟练的 ...

  3. mvc-6依赖管理

    CommonJS CommonJS规范,主要解决命名空间管理模块和用一套标准的编程模式来加载模块: 很快成为了JavaScript模块写法的事实标准: 它包含IO接口,底层的套接字流,以及单元测试等标 ...

  4. maven冲突管理及依赖管理实践

    1.“最近获胜策略(nearest wins strategy)”的方式处理依赖冲突 Maven采用“最近获胜策略(nearest wins strategy)”的方式处理依赖冲突,即如果一个项目最终 ...

  5. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  6. webpack对多个模块依赖进行打包

    [ webpack3.0.0刚刚出来  所以文章是跟着低版本 教程 操作熟悉  结果好多对不上喔] 七:webpack对多个模块依赖进行打包 通过一刚开始我们了解到 webpack支持commonJS ...

  7. webpack中多模块依赖

    多模块依赖 刚才的例子,我们仅仅是跑通了webpack通过entry.js入口文件进行打包的例子.下面我们就来看一下它是否真的支持CommonJs和AMD两种模块机制呢?下面我们新建多几个js文件吧! ...

  8. Maven多模块项目依赖管理

    Maven多模块项目依赖管理及dependencies与dependencyManagement的区别 转自:http://blog.csdn.net/liutengteng130/article/d ...

  9. webpack模块解析

    前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...

随机推荐

  1. tomcat下jsp要加工程名后缀才能访问的问题解决

    今天发现一个部署的项目,在tomcat中配置了去掉工程名,直接通过域名访问.配置后其它的html.动态请求等都可以不带工程名访问,但是只要访问jsp页面就报404错误,加上工程名访问jsp却又正常. ...

  2. Learn ZYNC (2)

    AXI HP接口的DMA+GIC编程(参照博客) 参照文档:UG873,博客文档 参考设计代码文件:ug873源码 我的Vivado+SDK工程文件打包(60+M) 我的DMA驱动程序(已完成) Vi ...

  3. Ubuntu下安装R语言和开发环境

    [简介]R是用于统计分析.绘图的语言和操作环境.R是属于GNU系统的一个自由.免费.源代码开放的软件,它是一个用于统计计算和统计制图的优秀工具. [R语言的安装]官网:https://www.r-pr ...

  4. 【资料下载区】【iCore3相关代码、资料下载地址】更新日期2017/1/5

    [iCore3 ARM代码下载地址][全部]DEMO1.0测试程序发布例程一:ARM驱动三色LED例程二:读取arm按键状态例程三:EXTI中断输入实验——读取ARM按键状态例程四:USART通信实验 ...

  5. 简单的行为控制管理方法,自动登录,session定时验证码过期

    代码很简单 实现的方式很多,用cookies 用static 变量 file文件缓存 等等 比如 //简单行为管理,如果请求此方法次数多于5次,就显示验证码 吧当前方法的name传进来,有效时间是5分 ...

  6. elasticsearch-hadoop使用示例

    在elasticsearch-hadoop的具体使用中碰到了几个问题,有必要记录一下,避免下次遇到时又要重新研究. 利用spark读取es数据源的简单示例 import org.elasticsear ...

  7. Nginx多个域名,https redirect to http

    背景描述:Nginx绑定多个域名,其中一个域名配置了https,如域名A:https://www.aaa.com:另外的域名B(http://www.bbb.com)没有配置SSL证书, 问题:以ht ...

  8. sleep thread process

    $str = 'w0'; for($w=0;$w<999999;$w++){ $sql = 'INSERT INTO w1 (wint,wchar) VALUES ('.$w.',"' ...

  9. linux实践之程序破解

    linux实践之程序破解 这次的实践是文件破解,让我们从login可执行文件开始吧! 首先我们执行一下这个可执行程序 ①我们希望在不知道密码的情况下,能够登陆进去.且无论密码是什么,都是提示“on y ...

  10. 两个NOI题目的启迪8皇后和算24

    论出于什么原因和目的,学习C++已经有一个星期左右,从开始就在做NOI的题目,到现在也没有正式的看<Primer C++>,不过还是受益良多,毕竟C++是一种”低级的高级语言“,而且NOI ...