On this page

Allows you to set up exports using module.exports or export for source files.

Useful when a source file does not contain exports or when something is not exported.

For more information on compatibility issues, refer to the Shimming guide in the official documentation.

Warning:

By default, the loader generates exports using ES module syntax.

Warning:

Be careful: modifying existing exports (export, module.exports, or exports) or adding new exports can lead to errors.

To begin, you'll need to install exports-loader:

npm install exports-loader --save-dev

or

yarn add -D exports-loader

or

pnpm add -D exports-loader

The | or %20 (space) allow to separate the syntax, name and alias of export.

The documentation and syntax examples can be read here.

Warning:

%20 represents a space in a query string because spaces are not allowed in URLs.

Then add the loader to the desired import statement or require calls. For example:

import { myFunction } from "exports-loader?exports=myFunction!./file.js";
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// export { myFunction }

myFunction("Hello world");
JavaScript

Descriptions of string values can be found in the documentation below.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // You can use `regexp`
        // test: /vendor\.js/$
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: "myFunction",
        },
      },
    ],
  },
};
JavaScript

Finally, run webpack using the method you normally use (e.g., via CLI or an npm script).

NameTypeDefaultDescription
type{String}moduleFormat of generated exports
exports{String|Object|Array<String|Object>}undefinedList of exports

Type: String Default: module

Format of generated exports.

Possible values - commonjs (CommonJS module syntax) and module (ES module syntax).

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: "Foo",
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

module.exports = { Foo };
JavaScript

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "module",
          exports: "Foo",
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

export { Foo };
JavaScript

Type: String|Array Default: undefined

List of exports.

Allows to use a string to describe an export.

The | or %20 (space) allow to separate the syntax, name and alias of export.

String syntax - [[syntax] [name] [alias]] or [[syntax]|[name]|[alias]], where:

  • [syntax] (may be omitted) -

    • if type is module- can be default and named,
    • if type is commonjs- can be single and multiple

  • [name] - name of an exported value (required)

  • [alias] - alias of an exported value (may be omitted)

Examples:

  • [Foo] - generates export { Foo };.
  • [default Foo] - generates export default Foo;.
  • [named Foo] - generates export { Foo };.
  • [named Foo FooA] - generates export { Foo as FooA };.
  • [single Foo] - generates module.exports = Foo;.
  • [multiple Foo] - generates module.exports = { Foo };.
  • [multiple Foo FooA] - generates module.exports = { 'FooA': Foo };.
  • [named [name] [name]Alias] - generates ES module named exports and exports a value equal to the filename under other name., for single.js it will be single and singleAlias, generates export { single as singleAlias };.

Warning:

You need to set type: "commonjs" to use single or multiple syntaxes.

Warning:

Aliases can't be used together with default or single syntaxes.

ES Module Default Export

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: "default Foo",
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

export default Foo;
JavaScript
ES Module Named Exports

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: "named Foo FooA",
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

export { Foo as FooA };
JavaScript
CommonJS Single Export

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: "single Foo",
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

module.exports = Foo;
JavaScript
CommonJS Multiple Exports

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: "multiple Foo FooA",
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

module.exports = { FooA: Foo };
JavaScript

Allows to use an object to describe an export.

Properties:

  • syntax - can be default or named for the module type (ES modules module format), and single or multiple for the commonjs type (CommonJS module format) (may be omitted)
  • name - name of an exported value (required)
  • alias - alias of an exported value (may be omitted)
ES Module Default Export

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: {
            syntax: "default",
            name: "Foo",
          },
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

export default Foo;
JavaScript
ES Module Named Exports

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: {
            syntax: "named",
            name: "Foo",
            alias: "FooA",
          },
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

export { Foo as FooA };
JavaScript
CommonJS Single Export

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: {
            syntax: "single",
            name: "Foo",
          },
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

module.exports = Foo;
JavaScript
CommonJS Multiple Exports

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: {
            syntax: "multiple",
            name: "Foo",
            alias: "FooA",
          },
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

module.exports = { FooA: Foo };
JavaScript

Allow to specify multiple exports. Each item can be a string or an object.

Warning:

Not possible to use both single and multiple syntaxes together due to CommonJS format limitations.

Warning:

Not possible to use multiple default values due to ES module format limitations.

Warning:

Not possible to use multiple single values due to CommonJS format limitations.

CommonJS Multiple Exports

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: ["Foo", "multiple Bar", "multiple Baz BazA"],
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

module.exports = { Bar, BazA: Bar, Foo };
JavaScript
ES Module Default Export And Named Exports Together

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: ["default Foo", "named Bar BarA"],
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

export default Foo;
export { Bar as BarA };
JavaScript
Named Exports

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: [
            { syntax: "named", name: "Foo", alias: "FooA" },
            { syntax: "named", name: "Bar" },
            "Baz",
          ],
        },
      },
    ],
  },
};
JavaScript

Generate output:

// ...
// Code
// ...

export { Foo as FooA, Bar, Baz };
JavaScript

We welcome all contributions!

If you're new here, please take a moment to review our contributing guidelines.

CONTRIBUTING

MIT