Webpack

Fleeting

target

• External reference: https://webpack.js.org/configuration/target/

target string [string] false

Instructs webpack to generate runtime code for a specific environment. Note that webpack runtime code is not the same as the user code you write, you should transpile those code with transpilers like Babel if you want to target specific environments, e.g, you have arrow functions in source code and want to run the bundled code in ES5 environments. Webpack won’t transpile them automatically with a target configured

— https://webpack.js.org/configuration/target/

multiple targets

you can create an isomorphic library by bundling two separate configurations:

webpack.config.js

const path = require(‘path’); const serverConfig = { target: ’node’, output: { path: path.resolve(__dirname, ‘dist’), filename: ’lib.node.js’, }, //… };

const clientConfig = { target: ‘web’, // <=== can be omitted as default is ‘web’ output: { path: path.resolve(__dirname, ‘dist’), filename: ’lib.js’, }, //… };

module.exports = [serverConfig, clientConfig]; The example above will create a lib.js and lib.node.js file in your dist folder.

— https://webpack.js.org/concepts/targets/

output.globalObject

• External reference: https://webpack.js.org/configuration/output/

  output.globalObject string = ‘self’

  When targeting a library, especially when libraryTarget is ‘umd’, this option indicates what global object will be used to mount the library. To make UMD build available on both browsers and Node.js, set output.globalObject option to ’this’. Defaults to self for Web-like targets.

  — https://webpack.js.org/configuration/output/

Notes linking here

• webpack bundled JS library with “umd” module system in Nodejs throws error: “self” is not defined

Permalink