


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
dependencies: module dependency array
callback: callback function
##require-ensure
- dependencies: Array of dependent modules
- callback: callback function, a require parameter will be passed when the function is called
- chunkName: module name, used for building When generating files, use
Example
require-amd
Source codewebpack.config.amd .jsvar 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 codewebpack.config.ensure.jsvar 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
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.jsvar 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
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: aaamodule1
bbb
ccc
1module2
ddd
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!

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

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

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

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

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

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

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

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


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

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 latest version

SublimeText3 Chinese version
Chinese version, very easy to use

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Mac version
God-level code editing software (SublimeText3)
