webpack require.ensure와 require AMD의 차이점에 대한 자세한 설명

이 글은 webpack require.ensure와 require AMD의 차이점에 대한 자세한 설명을 주로 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

require-amd

설명: AMD 사양의 require 함수와 동일합니다. 모듈 배열 및 콜백 함수는 모듈을 다운로드하고 실행한 후에만 실행됩니다.
구문: require( 종속성: 문자열[], [콜백: 함수(...)])

parameters

종속성: 모듈 종속성 배열
callback: 콜백 함수

require-

참고: require.ensure는 필요한 경우에만 종속 모듈을 다운로드합니다. 매개변수에 지정된 모든 모듈이 다운로드되면(다운로드된 모듈은 아직 실행되지 않음)

매개변수에 지정된 콜백 함수가 실행됩니다. . require.ensure는 청크를 생성하며 청크 이름을 지정할 수 있습니다. 청크 이름이 이미 존재하는 경우 종속 모듈이 기존 청크에 병합됩니다. 마지막으로 이 청크는 webpack이 빌드될 때 별도로 생성됩니다. 파일.

구문: ​​require.ensure(종속성: 문자열[], 콜백: 함수([요구]), [chunkName: 문자열])

종속성: 종속 모듈 배열
콜백: 콜백 함수, 함수가 호출되면 필수 매개변수가 전달됩니다
chunkName: 모듈 이름, 생성 중 파일을 생성할 때 이름을 지정하는 데 사용됩니다.
참고: requi.ensure 모듈은 다운로드만 되고 실행되지는 않습니다. 콜백 함수가 require(모듈 이름)을 사용할 때까지 실행되지 않습니다.

example

require-amd

소스 코드

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

rrre
module1.js

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

module2.js

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

Build results

명령줄에서 webpack 실행 --config webpack.config.amd.js

- main.bundle.js

- example.amd.js
- 1. Chunk.js
- module1.js
- module2.js

Running results

브라우저에서 amd/index.html을 실행하면 콘솔 출력:

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

require-ensure

source 코드

webpack.config.ensure.js

module1
aaa
module2
bbb

example.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"
  }
};

module1.js

위와 동일

module2.js

위와 동일

결과 빌드

명령줄에서 webpack --config webpack.config.ensure.js

- main.bundle.js

- example.amd.js
- 1.chunk.js
- module1.js
- module2.js
를 실행합니다. Running Renusting run run 브라우저에서/index.html 보장, 콘솔 출력 :

aaa

module2bbb module1

require-ensure-chunk


source code

webpack.config.ensure .chunk.js

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

example.ensur.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"
  }
};

module1.js

위와 동일

module2.js

위와 동일

명령줄 webpack에서 실행 -- config webpack.config .ensure.js

- main.bundle.js

- example.amd.js
- 1.chunk.js
- module1.js

- module2.js

브라우저에서 verify/index를 실행합니다. html, 콘솔 출력:

aaa
module1
bbb
cccc
1Module2
ddd

관련 권장 사항:

Webpack, Babel 및 React에 대한 지식

Loader 및 Plugin 이해 방법
웹팩에서

웹팩으로 CSS를 패키징하는 방법

위 내용은 webpack require.ensure와 require AMD의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!