search
HomeWeb Front-endJS TutorialDetailed explanation of the difference between webpack require.ensure and require AMD

This article mainly introduces the detailed explanation of the difference between webpack require.ensure and require AMD. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

require-amd

Description: Same as the require function of AMD specification. When used, a module array and callback function are passed. The modules are downloaded and all The callback function is executed only after it is executed

Syntax: require(dependencies: String[], [callback: function(...)])

Parameters

  1. dependencies: module dependency array

  2. callback: callback function

##require-ensure

Explanation: require.ensure only downloads dependent modules when needed. When all the modules specified by the parameters have been downloaded (the downloaded modules have not been executed yet), they will be executed

The callback function specified by the parameter. require.ensure will create a chunk, and you can specify the name of the chunk. If the chunk name already exists, the dependent modules will be merged into the existing chunk. Finally, this chunk will be generated separately when webpack is built. a file.


Syntax: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

  1. dependencies: Array of dependent modules

  2. callback: callback function, a require parameter will be passed when the function is called

  3. chunkName: module name, used for building When generating files, use

. Note: the requi.ensure module will only be downloaded and will not be executed. Only after the callback function uses require (module name), this The module will be executed.


Example

require-amd

Source code

webpack.config.amd .js


var path = require("path");
module.exports = {
  entry: "./example.amd.js",
  output: {
    path: path.join(__dirname, "amd"),
    filename: "[name].bundle.js",
    chunkFilename: "[id].chunk.js"
  }
};

example.amd.js


require(["./module1"], function(module1) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
});

module1.js


console.log("module1");
module.exports = 1;

module2.js


console.log("module2");
module.exports = 2;

Build results

Run webpack --config webpack in the command line .config.amd.js

- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

Run result

Run amd/index.html in the browser, the console output:


module1
aaa
module2
bbb

require-ensure

Source code

webpack.config.ensure.js


var path = require("path");
module.exports = {
  entry: "./example.ensure.js",
  output: {
    path: path.join(__dirname, "ensure"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};

example.ensure.js


require.ensure(["./module1"], function(require) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
  require("./module1");
}, 'test');

module1.js

Same as above

module2.js

Same as above

Build result

Run webpack in the command line --config webpack.config.ensure.js

- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

Running results

Run ensure/index.html in the browser, console output:

aaa

module2
bbb
module1

require-ensure-chunk

Source code

webpack.config.ensure.chunk.js


var path = require("path");
module.exports = {
  entry: "./example.ensur.chunk.js",
  output: {
    path: path.join(__dirname, "ensure-chunk"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};

example.ensur.chunk.js


require.ensure(["./module1"], function(require) {
  console.log("aaa");
  require("./module1");
  console.log("bbb");
}, 'common');

require.ensure(["./module2"], function(require) {
  console.log("ccc");
  require("./module2");
  console.log("ddd");
}, 'common');

module1. js

Same as above

module2.js

Same as above

Build results

Run webpack --config webpack in the command line .config.ensure.js

- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

Run result

Run ensure/index.html in the browser, the console output:

aaa

module1
bbb
ccc
1module2
ddd

Related recommendations:


Knowledge about Webpack, Babel and React

How to understand loader and plugin in webpack

How to use webpack to package css

The above is the detailed content of Detailed explanation of the difference between webpack require.ensure and require AMD. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
vue3+vite:src使用require动态导入图片报错怎么解决vue3+vite:src使用require动态导入图片报错怎么解决May 21, 2023 pm 03:16 PM

vue3+vite:src使用require动态导入图片报错和解决方法vue3+vite动态的导入多张图片vue3如果使用的是typescript开发,就会出现require引入图片报错,requireisnotdefined不能像使用vue2这样imgUrl:require(’…/assets/test.png’)导入,是因为typescript不支持require所以用import导入,下面介绍如何解决:使用awaitimport

VUE3入门教程:使用Webpack进行打包和构建VUE3入门教程:使用Webpack进行打包和构建Jun 15, 2023 pm 06:17 PM

Vue是一款优秀的JavaScript框架,它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本,它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一,它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack

vite和webpack的区别是什么vite和webpack的区别是什么Jan 11, 2023 pm 02:55 PM

区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖,而webpack基于node。4、vite的生态不及webpack,加载器、插件不够丰富。

如何使用PHP和webpack进行模块化开发如何使用PHP和webpack进行模块化开发May 11, 2023 pm 03:52 PM

随着Web开发技术的不断发展,前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言,在进行模块化开发时,我们需要借助一些工具来实现模块的管理和打包,其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块,每个模块都有自己的作

vue webpack可打包哪些文件vue webpack可打包哪些文件Dec 20, 2022 pm 07:44 PM

在vue中,webpack可以将js、css、图片、json等文件打包为合适的格式,以供浏览器使用;在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包,并且在打包的过程中,可以对资源进行处理,如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。

require的用法有哪些require的用法有哪些Nov 27, 2023 am 10:03 AM

require用法:1、引入模块:在许多编程语言中,require用于引入外部模块或库,以便在程序中使用它们提供的功能。例如,在Ruby中,可以使用require来加载第三方库或模块;2、导入类或方法:在一些编程语言中,require用于导入特定的类或方法,以便在当前文件中使用它们;3、执行特定任务:在一些编程语言或框架中,require用于执行特定的任务或功能。

Webpack是什么?详解它是如何工作的?Webpack是什么?详解它是如何工作的?Oct 13, 2022 pm 07:36 PM

Webpack是一款模块打包工具。它为不同的依赖创建模块,将其整体打包成可管理的输出文件。这一点对于单页面应用(如今Web应用的事实标准)来说特别有用。

webpack怎么将es6转成es5的模块webpack怎么将es6转成es5的模块Oct 18, 2022 pm 03:48 PM

配置方法:1、用导入的方法把ES6代码放到打包的js代码文件中;2、利用npm工具安装babel-loader工具,语法“npm install -D babel-loader @babel/core @babel/preset-env”;3、创建babel工具的配置文件“.babelrc”并设定转码规则;4、在webpack.config.js文件中配置打包规则即可。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)