Sponsor webpack and get apparel from the official shop! All proceeds go to our open collective!

Target

webpack can compile for multiple environments or targets. To understand what a target is in detail, read through the targets concept page.

target

string | function (compiler)

Instructs webpack to target a specific environment.

string

The following string values are supported via WebpackOptionsApply:

Option Description

Option

Description

async-node

Compile for usage in a Node.js-like environment (uses fs and vm to load chunks asynchronously)

Compile for usage in a Node.js-like environment (uses fs and vm to load chunks asynchronously)

Option

Description

electron-main

Compile for Electron for main process.

Compile for Electron for main process.

Option

Description

electron-renderer

Compile for Electron for renderer process, providing a target using JsonpTemplatePlugin, FunctionModulePlugin for browser environments and NodeTargetPlugin and ExternalsPlugin for CommonJS and Electron built-in modules.

Compile for Electron for renderer process, providing a target using JsonpTemplatePlugin , FunctionModulePlugin for browser environments and NodeTargetPlugin and ExternalsPlugin for CommonJS and Electron built-in modules.

Option

Description

node

Compile for usage in a Node.js-like environment (uses Node.js require to load chunks)

Compile for usage in a Node.js-like environment (uses Node.js require to load chunks)

Option

Description

node-webkit

Compile for usage in WebKit and uses JSONP for chunk loading. Allows importing of built-in Node.js modules and nw.gui (experimental)

Compile for usage in WebKit and uses JSONP for chunk loading. Allows importing of built-in Node.js modules and nw.gui (experimental)

Option

Description

web

Compile for usage in a browser-like environment (default)

Compile for usage in a browser-like environment (default)

Option

Description

webworker

Compile as WebWorker

Compile as WebWorker

For example, when the target is set to "electron-main", webpack includes multiple electron specific variables. For more information on which templates and externals are used, you can refer to webpack's source code.

function

If a function is passed, then it will be called with the compiler as a parameter. Set it to a function if none of the predefined targets from the list above meet your needs.

For example, if you don't want any of the plugins they applied:

const options = {
  target: () => undefined
};

Or you can apply specific plugins you want:

const webpack = require('webpack');

const options = {
  target: (compiler) => {
    compiler.apply(
      new webpack.JsonpTemplatePlugin(options.output),
      new webpack.LoaderTargetPlugin('web')
    );
  }
};