webpack学习之——模块(Modules)

在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块

每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

什么是 webpack 模块

对比 Node.js 模块,webpack 模块能够以各种方式表达它们的依赖关系,几个例子如下:

  • ES2015 import 语句;
  • CommonJSrequire() 语句;
  • AMDdefine 和 require 语句;
  • css/sass/less 文件中的 @import 语句;
  • 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

支持的模块类型

webpack 通过 loader 可以支持各种语言和预处理器编写模块。loader 描述了 webpack 如何处理 非 JavaScript(non-JavaScript) 模块,并且在bundle中引入这些依赖。 webpack 社区已经为各种流行语言和语言处理器构建了 loader,包括:

总的来说,webpack 提供了可定制的、强大和丰富的 API,允许任何技术栈使用 webpack,保持了在你的开发、测试和生成流程中无侵入性(non-opinionated)。

模块解析(Module Resolution)

resolver 是一个库(library),用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块,然后被后者引用,如下:

所依赖的模块可以是来自应用程序代码或第三方的库(a third party library)。resolver 帮助 webpack 找到 bundle 中需要引入的模块代码,这些代码在包含在每个 require/import 语句中。 当打包模块时,webpack 使用 enhanced-resolve 来解析文件路径

webpack 中的解析规则

使用 enhanced-resolve,webpack 能够解析三种文件路径:

绝对路径

由于我们已经取得文件的绝对路径,因此不需要进一步再做解析。

相对路径

在这种情况下,使用 import 或 require 的资源文件(resource file)所在的目录被认为是上下文目录(context directory)。在 import/require 中给定的相对路径,会添加此上下文路径(context path),以产生模块的绝对路径(absolute path)。

模块路径

模块将在 resolve.modules 中指定的所有目录内搜索。 你可以替换初始模块路径,此替换路径通过使用 resolve.alias 配置选项来创建一个别名。

一旦根据上述规则解析路径后,解析器(resolver)将检查路径是否指向文件或目录。如果路径指向一个文件:

  • 如果路径具有文件扩展名,则被直接将文件打包。
  • 否则,将使用 [resolve.extensions] 选项作为文件扩展名来解析,此选项告诉解析器在解析中能够接受哪些扩展名(例如 .js.jsx)。

如果路径指向一个文件夹,则采取以下步骤找到具有正确扩展名的正确文件:

  • 如果文件夹中包含 package.json 文件,则按照顺序查找 resolve.mainFields 配置选项中指定的字段。并且 package.json 中的第一个这样的字段确定文件路径。
  • 如果 package.json 文件不存在或者 package.json 文件中的 main 字段没有返回一个有效路径,则按照顺序查找 resolve.mainFiles 配置选项中指定的文件名,看是否能在 import/require 目录下匹配到一个存在的文件名。
  • 文件扩展名通过 resolve.extensions 选项采用类似的方法进行解析。

webpack 根据构建目标(build target)为这些选项提供了合理的默认配置。

缓存

每个文件系统访问都被缓存,以便更快触发对同一文件的多个并行或串行请求。在观察模式下,只有修改过的文件会从缓存中摘出。如果关闭观察模式,在每次编译前清理缓存。

时间: 2024-11-06 13:54:38

webpack学习之——模块(Modules)的相关文章

webpack学习之—— 模块热替换(Hot Module Replacement)

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载整个页面.主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面时丢失的应用程序状态. 只更新变更内容,以节省宝贵的开发时间. 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式. 在应用程序中 通过以下步骤,可以做到在应用程序中置换(swap in and out)模块: 应用程序代码要求 HMR runtime 检查更新. HMR runti

更博不能忘——webpack学习笔记

webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不用会忘掉一丢丢,但是看过脑海中还是有印象的. webpack能够用作模块加载和打包类似Browserify,且能做更多.类似上诉模块管理工具都会有一个相应的配置文件,用于说明,你打包的文件,包装的模块等. webpack常用命令: webpack -p 压缩混淆脚本 webpack --watch

webpack学习笔记一

webpack.gulp.grunt是前端打包功能工具:因为已经学习了gulp,而最近发现webpack很火,于是着手学习webpack.本篇是webpack学习笔记系列的第一篇,欢迎指教. 我是从慕课网以及官网文档相结合的方式学习的,从官方文档学到的第一个知识点是在使用webpack打包过程中,即使没有webpack.config,js这个文件也是可以的. 首先是全局安装webpack,cmd(如果是window系统,在任意位置)执行命令: npm install --g webpack或cn

webpack 学习心得(一)

Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 因为本人也正在学习webpack ,所以此篇文章比较入门. 首先你想使用webpack 需要安装node,推荐最好使用的是4.0以上(为了避免依赖安装错误) npm install -g webpack 安装 webpack 你可以手动创建相应文件,也可以这样 mkdir webpackdemo cd webpackdemo 创建 webpackdemo 文件夹 进入当前目录

haskell模块(modules)

装载模块 Haskell 中的模块是含有一组相关的函数,类型和类型类的组合.而 Haskell 进程的本质便是从主模块中引用其它模块并调用其中的函数来执行操作.这样可以把代码分成多块,只要一个模块足够的独立,它里面的函数便可以被不同的进程反复重用.这就让不同的代码各司其职,提高了代码的健壮性. Haskell 的标准库就是一组模块,每个模块都含有一组功能相近或相关的函数和类型.有处理 List 的模块,有处理并发的模块,也有处理复数的模块,等等.目前为止我们谈及的所有函数,类型以及类型类都是 P

前端小白webpack学习(一)

俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档,先了解一下webpack的几个概念.我是中英文文档搀着看的,一些小地方中文文档里没写,英文文档里都给了小提示.(下面的概念是我自己翻译总计的,略渣) concepts At its core, webpack is a static module bundler for modern JavaScr

10.webpack学习使用

1.什么是Webpack Webpack 是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分离,等到实际需要时再异步加载.通过 loader 转换,任何形式的资源都可以当做模块,比如 CommonsJS.AMD.ES6.CSS.JSON.CoffeeScript.LESS 等: 2.为什么需要Webpack 前端开发和其他开发工作的主要区别,首先是前端基于多语言.多层次的编码和组织工作,其次前端产

python学习--创建模块

昨天做了python客户端和服务器端通信,并把接收到的信息写到数据库,因为对数据库进行操作是个经常调用的行为,所以我想把调用数据库的操作写成一个module来给其它python程序调用,所以将昨天的服务器端程序拆分为两个文件: 1.主程序python.py #!/usr/bin/env python import socket import json import connmysql s = socket.socket(socket.AF_INET,socket.SOCK_STREAM,0) h

压缩跟踪(CT)代码详细学习_模块1(样本的采集和扩充)

本章主要详解的是compressive tracking框架中的第一部分:样本的采集和扩充部分. 在开始代码学习的前面,你需要知道的理论知识参见论文:Real-time Compressive Tracking.理论理解可以参见我的博客:http://blog.csdn.net/ikerpeng/article/details/19826409 . 这个模块中你需要知道一个基本的概念:代码里面几个变量指的是什么.上一张图: 也许你现在还不知道他们是什么,直接贴代码了.相信有我的注释你一定会懂的.