模块(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. PHP20 PHP面向对象辅助

    学习要点 常用函数 命名空间 类的自动加载 常用函数 class_exists 作用:检查类是否已定义 语法格式: bool class_exists ( string $class_name [, ...

  2. Openjudge-2815-城堡问题

    对于这道题目来说的话,我们的思路是这样的,我们首先把数据读进来,然后把color数组清零. 我们的思路是这样的的,给每一个房间设置一个对应的color数组,然后color数组里面填满不同的数字,每一种 ...

  3. 同一SQL语句在PLSQL Developer与SQL * PLUS工具中执行结果不一致

    背景 今天遇到如下问题,同一sql语句在PLSQL Developer与SQL*PLUS工具中执行结果不一致, sql语句如下 SELECT 'GROUPHEALTH_SEND_EMAIL' as i ...

  4. 交互式数据可视化-D3.js(四)形状生成器

    使用JavaScript和D3.js实现数据可视化 形状生成器 线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器. linePath.x() ...

  5. 使用github中py12306抢票系得

    首先需要安装最新的python:安装步骤见:https://www.cnblogs.com/weven/p/7252917.html 其次下载python源码: 链接:https://pan.baid ...

  6. 剑指Offer(书):机器人的运动范围

    题目:地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能够进 ...

  7. Java多线程入门Ⅱ

    线程的让步 线程让出自己占用的CPU资源 线程让出资源,不指定让给谁 线程让出资源,指定让给谁 方法1: public static void yield(); 线程实现交替打印 import jav ...

  8. reactNative 介绍

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安 ...

  9. 大数据学习——Linux-SSH报错:Could not resolve hostname centos02: Temporary failure in name resolution

    https://blog.csdn.net/mcb520wf/article/details/83303792 随笔异常 ssh: Could not resolve hostname centos0 ...

  10. selenium启动chrome出错处理:Message: 'chromedriver' executable needs to be in PATH