Module API: Methods

Module API - Methods

This section covers all methods available in code compiled with webpack. When using webpack to bundle your application, you can pick from a variety of module syntax styles including ES6, CommonJS, and AMD.

While webpack supports multiple module syntaxes, we recommend following a single syntax for consistency and to avoid odd behaviors/bugs. Here's one example of mixing ES6 and CommonJS, however there are surely others.

Version 2 of webpack supports ES6 module syntax natively, meaning you can use import and export without a tool like babel to handle this for you. Keep in mind that you will still probably need babel for other ES6+ features. The following methods are supported by webpack:

import

Statically import the exports of another module.

import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';
The keyword here is statically. Normal import statement cannot be used dynamically within other logic or contain variables. See the spec for more information and import() below for dynamic usage.

export

Export anything as a default or named export.

// Named exports
export var Count = 5;
export function Multiply(a, b) {
  return a * b;
}

// Default export
export default {
  // Some data...
}

import()

Dynamically load modules.

if ( module.hot ) {
  import('lodash').then(_ => {
    // Do something with lodash (a.k.a '_')...
  })
}

The compiler treats this as a split point and will split everything from lodash into a separate bundle. This returns a promise that will resolve to the module once the bundle has been loaded. See the async code splitting guide for more information.

CommonJS

The goal of CommonJS is to specify an ecosystem for JavaScript outside the browser. The following CommonJS methods are supported by webpack:

require

require(dependency: String)

Synchronously retrieve the exports from another module. The compiler will ensure that the dependency is available in the output bundle.

var $ = require("jquery");
var myModule = require("my-module");
Using it asynchronously may not have the expected effect.

require.resolve

require.resolve(dependency: String)

Synchronously retrieve a module's ID. The compiler will ensure that the dependency is available in the output bundle. See module.id for more information.

var id = require.resolve("dependency");
typeof id === "number";
id === 0 // if dependency is the entry point
id > 0 // elsewise
Module ID is a number in webpack (in contrast to NodeJS where it is a string -- the filename).

require.cache

Multiple requires to the same module result in only one module execution and only one export. Therefore a cache in the runtime exists. Removing values from this cache cause new module execution and a new export.

This is only needed in rare cases for compatibility!
var d1 = require("dependency");
require("dependency") === d1
delete require.cache[require.resolve("dependency")];
require("dependency") !== d1
// in file.js
require.cache[module.id] === module
require("./file.js") === module.exports
delete require.cache[module.id];
require.cache[module.id] === undefined
require("./file.js") !== module.exports // in theory; in praxis this causes a stack overflow
require.cache[module.id] !== module

require.ensure

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

Split out the given dependencies to a separate bundle that that will be loaded asynchronously. When using CommonJS module syntax, this is the only way to dynamically load dependencies. Meaning, this code can be run within execution, only loading the dependencies if a certain conditions are met. See the Asynchronous Code Splitting guide for more details.

var a = require('normal-dep');

if ( /* Some Condition */ ) {
  require.ensure(["b"], function(require) {
    var c = require("c");

    // Do something special...
  });
}

AMD

Asynchronous Module Definition (AMD) is a JavaScript specification that defines an interface for writing and loading modules. The following AMD methods are supported by webpack:

define (with factory)

define([name: String], [dependencies: String[]], factoryMethod: function(...))

If dependencies are provided, factoryMethod will be called with the exports of each dependency (in the same order). If dependencies are not provided, factoryMethod is called with require, exports and module (for compatibility!). If this function returns a value, this value is exported by the module. The compiler ensures that each dependency is available.

Note that webpack ignores the name argument.
define(['jquery', 'my-module'], function($, myModule) {
  // Do something with $ and myModule...

  // Export a function
  return function doSomething() {
    // ...
  };
});
This CANNOT be used in an asynchronous function.

define (with value)

define(value: !Function)

This will simply export the provided value. The value here can be anything except a function.

define({
  answer: 42
});
This CANNOT be used in an async function.

require (amd-version)

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

Similar to require.ensure, this will split the given dependencies into a separate bundle that will be loaded asynchronously. The callback will be called with the exports of each dependency in the dependencies array.

require(['b'], function(b) {
  var c = require("c");
});
There is no option to provide a chunk name.

Labeled Modules

The internal LabeledModulesPlugin enables you to use the following methods for exporting and requiring within your modules:

export label

Export the given value. The label can occur before a function declaration or a variable declaration. The function name or variable name is the identifier under which the value is exported.

export: var answer = 42;
export: function method(value) {
  // Do something...
};
Using it in an async function may not have the expected effect.

require label

Make all exports from the dependency available in the current scope. The require label can occur before a string. The dependency must export values with the export label. CommonJS or AMD modules cannot be consumed.

some-dependency.js

export: var answer = 42;
export: function method(value) {
  // Do something...
};
require: 'some-dependency';
console.log(answer);
method(...);

Webpack

Aside from the module syntaxes described above, webpack also allows a few custom, webpack-specific methods:

require.context

require.context(directory:String, includeSubdirs:Boolean /* optional, default true */, filter:RegExp /* optional */)

Specify a whole group of dependencies using a path to the directory, an option to includeSubdirs, and a filter for more fine grained control of the mdoules included. These can then be easily resolved later on.

var context = require.context('components', true, /\.html$/);
var componentA = context.resolve('componentA');

require.include

require.include(dependency: String)

Include a dependency without executing it. This can be used for optimizing the position of a module in the output chunks.

require.include('a');
require.ensure(['a', 'b'], function(require) { /* ... */ });
require.ensure(['a', 'c'], function(require) { /* ... */ });

This will result in following output:

  • entry chunk: file.js and a
  • anonymous chunk: b
  • anonymous chunk: c

Without require.include('a') it would be duplicated in both anonymous chunks.

require.resolveWeak

Similar to require.resolve, but this won't pull the module into the bundle. It's what is considered a "weak" dependency.

if(__webpack_modules__[require.resolveWeak('module')]) {
  // Do something when module is available...
}
if(require.cache[require.resolveWeak('module')]) {
  // Do something when module was loaded before...
}

Further Reading

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/api/module-methods

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部