模块(Modules)

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

每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。

精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

Node.js 从最一开始就支持模块化编程。

然而,在 web,模块化的支持正缓慢到来。

在 web 存在多种支持 JavaScript 模块化的工具,这些工具各有优势和限制。

webpack 基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文件。

什么是 webpack 模块

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

  • ES2015 import 语句
  • CommonJS require() 语句
  • AMD define 和 require 语句
  • css/sass/less 文件中的 @import 语句
  • 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)
webpack 1 需要特定的 loader 来转换 ES 2015 import,然而通过 webpack 2 可以开箱即用。

支持的模块类型

webpack 通过 loader 可以支持各种语言和预处理器编写模块。

loader 描述了 webpack 如何处理 非 JavaScript(non-JavaScript) 模块,并且在bundle中引入这些依赖

webpack 社区已经为各种流行语言和语言处理器构建了 loader,包括:

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

有关完整列表,请参考 loader 列表 或 自己编写

webpack-Modules(模块)的更多相关文章

  1. 【Webpack 杂谈】帮助文档翻译:Webpack的模块

    页面出自Webpack官方文档(撰写时,是v4.1.1) 其实Webpack本身有中文文档,不知道是谁去撰写的,但是自己翻译一遍感觉更好理解. https://webpack.js.org/conce ...

  2. 启用 webpack 的模块热替换特性

    启用 webpack 的模块热替换特性: module.exports = { //... devServer: { hot: true } } 注意,必须有 webpack.HotModuleRep ...

  3. webpack前端模块加载工具

    最近在看许多React的资料,发现了大部分的项目都是用webpack行模块化管理的工具.这次也是借着写了一个React-Todos的小应用,对webPack最基本实用的功能体验了一番,顺带做个小记录. ...

  4. webpack——Modules && Hot Module Replacement

    blog:JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015 官网链接: Modules 官网链接:Hot Module Rep ...

  5. webpack前端模块打包器

    webpack前端模块打包器 学习网址: https://doc.webpack-china.org/concepts/ http://www.runoob.com/w3cnote/webpack-t ...

  6. webpack 5 模块联合

    webpack 5 模块联合 webpack 5 https://webpack.docschina.org/concepts/module-federation/ https://github.co ...

  7. TypeScript Modules(模块)

    本文概述了TypeScript中如何使用模块以各种方式来组织代码.我们将涵括内部和外部的模块,并且讨论他们在适合在何时使用和怎么使用.我们也会学习一些如何使用外部模块的高级技巧,并且解决一些当我们使用 ...

  8. 【webpack】-- 模块热替换

    全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生 ...

  9. webpack(6)-模块热替代&tree shaking

    模块热替换(hot module replacement 或 HMR) 模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时 ...

  10. Ubuntu16.04下的modules模块编译加载

    一.首先编写对应的驱动程序的相关内容:(最简单的hello.c程序) #include<linux/init.h> #include<linux/module.h> MODUL ...

随机推荐

  1. QT_仅仅直接在构造函数中创建对象的不可行的原因

    #include "mainwidget.h" #include <QApplication> int main(int argc, char *argv[]) { Q ...

  2. node的影响及前后端之争

    作者:知乎用户链接:https://www.zhihu.com/question/59578433/answer/326694511来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  3. python 一些函数和类用法记录

    这一篇主要用来记录在学习过程中遇到的一些觉得有意思的函数或者类的用法,有一些用法感觉很炫酷. 1.collections.defaultdict from collections import def ...

  4. AHOI2014/JSOI2014 奇怪的计算器

    题目描述 题解: 考虑到经过一系列变化后小数不可能比大数大,我们可以用线段树维护区间修改. 重点是,每个节点都可以通过$a[i]=a[i]*t1+a0[i]*t2+t3$这个函数来表示,我们就可以把三 ...

  5. PHP基于phpqrcode类生成二维码的方法详解

    前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/2.PHP环境必须开启支持GD2扩展库支持(一般情况下都是 ...

  6. 02-Mysql中的运算符

    Mysql中运算符 1.算术运算符运算符 作用+   加法-    减法*    乘法/,DIV     除法,返回商%,MOD       除法,返回余数 mysql root@localhost: ...

  7. Linux文件和目录的权限笔记

    查看文件或者目录的权限命令:ls -al # -a 表示全部文件包含隐藏文件,-l 表示列出每个文件的详细信息 比如执行 ls -al total 115 drwxr--x--- 4 root roo ...

  8. 修改centos的yum源为国内的源

    1.安装Centos后默认的Yum源如下 ll /etc/yum.repos.d/   [root@localhost ~]# ll /etc/yum.repos.d/ total 32 -rw-r- ...

  9. 2. TypeScript笔记

    1. 安装node.js之后 需要测试npm命令 2.命令正常安装TypeScript 3.安装Egret egret 命令

  10. java环境配置—配置Tomcat8环境

    先安装JDK,配置好jdk环境后再配置Tomcat 8 配置环境变量: TOMCAT_HOME:D:\Program Files\apache-tomcat-8.0.28 CATALINA_HOME: ...