### Basic Plugin Setup for Dojo Webpack Plugin

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

Demonstrates the basic configuration of the DojoWebpackPlugin within a webpack.config.js file. It shows how to set up entry points, output paths, and essential plugin options like loaderConfig, locales, environment, and buildEnvironment.

```javascript
const DojoWebpackPlugin = require('dojo-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './js/bootstrap.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  plugins: [
    new DojoWebpackPlugin({
      loaderConfig: {
        baseUrl: '.',
        packages: [
          { name: 'dojo', location: 'node_modules/dojo' },
          { name: 'dijit', location: 'node_modules/dijit' },
          { name: 'dojox', location: 'node_modules/dojox' },
          { name: 'app', location: 'js/app' }
        ],
        paths: {
          'custom-lib': 'js/libs/custom-lib'
        },
        map: {
          '*': {
            'legacy-module': 'modern-module'
          }
        },
        aliases: [
          ['text', 'dojo/text']
        ],
        has: {
          'dojo-config-api': false,
          'dojo-undef-api': true,
          'config-tlmSiblingOfDojo': false
        }
      },
      locales: ['en', 'es', 'fr', 'de'],
      environment: { dojoRoot: 'node_modules/dojo' },
      buildEnvironment: { dojoRoot: 'release/dojo' }
    })
  ]
};

```

--------------------------------

### Configure Dojo Webpack Plugin in JavaScript

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Example configuration of the dojo-webpack-plugin in a Webpack setup. Specifies loaderConfig, locales, and optional loader path. Integrates the built Dojo loader into the bundle.

```javascript
plugins: [
	new require("dojo-webpack-plugin")({
		loaderConfig: require("./loaderConfig"),
		locales: ["en"],
		loader: path.join(__dirname, "./release/dojo/dojo.js")
	}),
]
```

--------------------------------

### Build Dojo Loader in Node.js

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Provides a Node.js script example to build the Dojo loader programmatically using the buildLoader function. Takes dojoPath and releaseDir as inputs, returns a promise. Useful for integrating into build pipelines.

```javascript
const buildLoader = require('dojo-webpack-loader').buildLoader;
buildLoader({
	dojoPath: "node_modules/dojo/dojo.js",
	releaseDir: "./release"
}).then(() => {
  console.log("loader built");
}).catch(err => {
  console.error(err);
});
```

--------------------------------

### Dojo Loader Extension Load Method Example (JavaScript)

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Illustrates a typical implementation of the 'load' method for a Dojo loader extension. It demonstrates delegating to another loader (like dojo/text) and processing the result before returning it. This is useful for extensions that perform operations on loaded file content.

```javascript
function load(name, req, callback) {
	req(["dojo/text!" + name], function(text) {
		callback(stripHeader(text).trim());
	});
}
```

--------------------------------

### Internationalization (i18n) with Dojo

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

Demonstrates how to implement internationalization by defining locale-specific resource bundles and loading them using `dojo/i18n`. Includes an example of configuring Webpack to include only specific locales for smaller builds.

```javascript
// i18n bundle structure: app/nls/messages.js
define({
  root: {
    greeting: "Hello",
    farewell: "Goodbye",
    welcome: "Welcome to our application"
  },
  es: true,
  fr: true,
  de: true
});

// Locale-specific bundle: app/nls/es/messages.js
define({
  greeting: "Hola",
  farewell: "Adiós",
  welcome: "Bienvenido a nuestra aplicación"
});

// Using i18n in modules
define(['dojo/i18n!app/nls/messages'], function(messages) {
  return {
    showGreeting: function() {
      console.log(messages.greeting);  // "Hello" or "Hola" based on locale
    }
  };
});
```

```javascript
// Webpack config with locale filtering
new DojoWebpackPlugin({
  loaderConfig: require('./loaderConfig'),
  locales: ['en', 'es', 'fr']  // Only bundle these locales
  // locales: []  // Only include root locale
  // locales: undefined  // Include all available locales
})
```

--------------------------------

### Webpack NormalModuleReplacementPlugin Configuration (JavaScript)

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Shows how to configure the Webpack NormalModuleReplacementPlugin to use the dojo/loaderProxy. This example specifically targets modules starting with 'svg!' and rewrites their requests to use the loaderProxy, specifying the original loader and dependencies.

```javascript
new webpack.NormalModuleReplacementPlugin(
	/^svg!/, function(data) {
		var match = /^svg!(.*)$/.exec(data.request);
		data.request = "dojo/loaderProxy?loader=svg&deps=dojo/text%21" + match[1] + "!" + match[1];
	}
)
```

--------------------------------

### Show runtime module resolution with dynamic require in Dojo

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

Provides examples of loading modules at runtime using variable identifiers and dynamic dependency arrays. Demonstrates how to request modules based on runtime data, ensuring they are part of loaded chunks. Useful for building flexible, data-driven applications.

```javascript
// Runtime module identifiers
define(['dojo/dom'], function(dom) {
  var moduleName = 'app/widgets/Button';

  function loadDynamic() {
    require([moduleName], function(Button) {
      var btn = new Button({ label: 'Click Me' });
      dom.byId('container').appendChild(btn.domNode);
    });
  }

  return { load: loadDynamic };
});

// Runtime expressions in dependency arrays
define(function() {
  var widgetType = 'Dialog';
  var themeName = 'claro';

  function loadWidget(callback) {
    var deps = [
      'app/widgets/' + widgetType,
      'app/themes/' + themeName + '/theme.css'
    ];

    require(deps, function(Widget, theme) {
      callback(new Widget());
    });
  }

  return { loadWidget: loadWidget };
});

// Runtime identifier for entire dependency array
define(['dojo/request/xhr'], function(xhr) {
  return {
    loadModules: function() {
      xhr.get('/api/modules', { handleAs: 'json' }).then(function(config) {
        var deps = config.requiredModules;  // e.g., ['app/a', 'app/b']
        require(deps, function() {
          var modules = Array.prototype.slice.call(arguments);
          console.log('Loaded modules:', modules);
        });
      });
    }
  };
});
```

--------------------------------

### Replace Dojo Text Loader with Webpack Raw Loader

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

This example demonstrates how to use Webpack's `NormalModuleReplacementPlugin` to replace the Dojo `dojo/text` loader extension with the Webpack `raw-loader`. This is useful for directly including text file content in modules. It targets requests starting with 'dojo/text!' and rewrites them to use '!!raw-loader!'.

```javascript
const webpack = require('webpack');
const DojoWebpackPlugin = require('dojo-webpack-plugin');

// ... other webpack configurations

plugins: [
	new DojoWebpackPlugin({/*...*/}),
	new webpack.NormalModuleReplacementPlugin(/^dojo\/text!/, function(data) {
		data.request = data.request.replace(/^dojo\/text!/, "!!raw-loader!");
	}),
	//...
]
```

--------------------------------

### Enable and Use require.undef for Module Testing

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

This example shows how to enable the `dojo-undef-api` in the `DojoWebpackPlugin` configuration for testing purposes. It demonstrates undefining a module using `require.undef` and then reloading it after changing a `dojo/has` feature flag, illustrating how conditional module loading works.

```javascript
// webpack.config.js - Enable undef API
new DojoWebpackPlugin({
  loaderConfig: {
    baseUrl: '.',
    packages: [{ name: 'dojo', location: 'node_modules/dojo' }],
    has: {
      'dojo-undef-api': true  // Enable require.undef support
    }
  },
  runtimeFeatures: ['feature1', 'feature2'],  // Allow runtime feature changes
  locales: ['en']
})

// Test file
define(['dojo/has'], function(has) {
  return {
    testFeatureVariations: function() {
      // Load module with feature enabled
      has.add('feature1', true, true, true);
      require(['app/conditional-module'], function(module1) {
        console.log('Module with feature1=true:', module1);

        // Undefine the module
        require.undef('app/conditional-module');

        // Change feature value
        has.add('feature1', false, true, true);

        // Reload module with different feature value
        require(['app/conditional-module'], function(module2) {
          console.log('Module with feature1=false:', module2);
          // module2 will be different from module1
        });
      });
    }
  };
});

// Module being tested with conditional loading
// app/conditional-module.js
define([
  'dojo/has!feature1?./impl-a:./impl-b',
  'dojo/has!feature2?./addon'
], function(impl, addon) {
  return {
    implementation: impl,
    hasAddon: !!addon
  };
});
```

--------------------------------

### Programmatic and CLI Dojo Loader Builds

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

This snippet illustrates how to build a custom version of the embedded Dojo loader using the `dojo-webpack-plugin`. It shows a programmatic approach using `buildLoader` with specific feature configurations (`has` object) and a command-line interface (CLI) method via `package.json` scripts. It also includes an example of using a pre-built loader in the Webpack configuration.

```javascript
// Build loader programmatically
const buildLoader = require('dojo-webpack-plugin').buildLoader;

buildLoader({
  dojoPath: 'node_modules/dojo/dojo.js',
  releaseDir: './release',
  has: {
    'dojo-config-api': false,      // Exclude config API
    'dojo-undef-api': true,        // Include undef support
    'dojo-loader-eval-hint-url': false,
    'config-tlmSiblingOfDojo': false
  },
  noConsole: false
}).then(() => {
  console.log('Dojo loader built successfully');
  console.log('Output: ./release/dojo/dojo.js');
}).catch(err => {
  console.error('Build failed:', err);
  process.exit(1);
});

// Using pre-built loader in webpack config
const path = require('path');

new DojoWebpackPlugin({
  loaderConfig: {
    baseUrl: '.',
    packages: [
      { name: 'dojo', location: 'node_modules/dojo' }
    ],
    has: {
      'dojo-config-api': false
    }
  },
  loader: path.join(__dirname, './release/dojo/dojo.js'),
  locales: ['en']
})

// CLI build script
// package.json
{
  "scripts": {
    "build:loader": "node buildDojo/build.js node_modules/dojo/dojo.js ./release",
    "build:loader:noconfig": "node buildDojo/build.js node_modules/dojo/dojo.js ./release '{\"dojo-config-api\":false}'"
  }
}
```

--------------------------------

### CSS Tilde Import for Non-Module Resources

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Demonstrates how to use the tilde prefix in CSS imports to resolve resources like modules in Webpack. This allows the dojo-webpack-plugin to handle non-module resources if ignoreNonModuleResources is not set to true. The example shows importing a CSS file from a package.

```css
@import '~myStylesPakage/styles.css';
```

--------------------------------

### Configure CommonJS Require Patterns in Webpack

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

This snippet demonstrates how to configure `cjsRequirePatterns` in `webpack.config.js` to distinguish between CommonJS and Dojo's synchronous require. It shows default patterns, specific module matching, and vendor module inclusion. The example also illustrates how these patterns are applied within AMD modules.

```javascript
// webpack.config.js
new DojoWebpackPlugin({
  loaderConfig: require('./loaderConfig'),
  cjsRequirePatterns: [
    /(imports-loader|exports-loader)[?!]/,  // Default patterns
    /^(lodash|moment|jquery)$/,              // Specific CommonJS modules
    /^vendor\//                               // All vendor modules
  ],
  locales: ['en']
})

// In AMD modules
var commonjs1 = require('imports-loader?foo=bar!./module.js');  // CommonJS
var commonjs2 = require('lodash');  // CommonJS (matches pattern)

define(['dojo/dom'], function(dom) {
  var dojoSync = require('dojo/query');  // Dojo synchronous require
  var cjs = require('vendor/legacy-lib');  // CommonJS (matches pattern)

  // Using cjsRequire for explicit CommonJS loading
  var async = cjsRequire('async');
  var bluebird = cjsRequire('bluebird');

  return {
    init: function() {
      dojoSync('.active').forEach(function(node) {
        dom.addClass(node, 'loaded');
      });
    }
  };
});
```

--------------------------------

### Use Runtime Identifiers in Require Dependency Arrays

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

This code demonstrates using runtime identifiers and expressions in require/define dependency arrays. The example uses variables and a function call in the dependency array. The referenced modules must already be loaded in the client's context, either from previous chunks or as dependencies of other modules in the same chunk.

```javascript
var fooName = 'foo';
function getBarName() {
	return 'bar';
}
require([fooName, getBarName(), 'baz'], function(foo, bar, baz) {
	/* ... */
});
```

--------------------------------

### Dojo Application Bootstrap Script (JavaScript)

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

This JavaScript file serves as the bootstrap entry point for the Dojo application. It uses Dojo's `require` syntax to load necessary modules, including a Promise polyfill for IE11, the `dojo/parser` for declarative widgets, and the application's main module. It waits for the DOM to be ready and then parses any declarative widgets before initializing the main application logic. This script is typically called by the Webpack build.

```javascript
// js/bootstrap.js
require([
  'dojo-webpack-plugin/amd/dojoES6Promise',  // IE11 Promise polyfill
  'dojo/parser',
  'dojo/ready',
  'app/main'
], function(dojoES6Promise, parser, ready, main) {
  ready(function() {
    parser.parse().then(function() {
      main.init();
    });
  });
});

```

--------------------------------

### Advanced DojoWebpackPlugin Configuration Options

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

This comprehensive configuration shows all available options for the `DojoWebpackPlugin`. It covers settings for loader configuration, locales, async definitions, environment configurations (runtime and build-time), path management, CommonJS patterns, and various boolean flags for controlling plugin behavior.

```javascript
const DojoWebpackPlugin = require('dojo-webpack-plugin');
const path = require('path');

new DojoWebpackPlugin({
  // Required: Dojo loader configuration
  loaderConfig: require('./loaderConfig'),

  // Optional: Filter locales to include
  locales: ['en', 'es', 'fr'],

  // Optional: Enable async AMD definitions
  async: true,

  // Optional: Environment for runtime config evaluation
  environment: {
    platform: 'web',
    dojoRoot: 'node_modules/dojo'
  },

  // Optional: Environment for build-time config evaluation
  buildEnvironment: {
    platform: 'build',
    dojoRoot: './release/dojo'
  },

  // Optional: Global require context path
  globalContext: path.join(__dirname, 'js'),

  // Optional: Pre-built loader path
  loader: path.join(__dirname, './release/dojo/dojo.js'),

  // Optional: CommonJS require patterns
  cjsRequirePatterns: [
    /(imports-loader|exports-loader)[?!]/,
    /^lodash$/
  ],

  // Optional: Treat undefined has features as false
  coerceUndefinedToFalse: false,

  // Optional: Suppress console output
  noConsole: false,

  // Optional: Force runtime evaluation of specified features
  runtimeFeatures: ['debug', 'test-mode'],

  // Optional: Skip Dojo resolution for non-module resources
  ignoreNonModuleResources: false,

  // Optional: Custom require function property name
  requireFnPropName: 'dj',

  // Optional: Compilation names to ignore
  ignoredCompilationNames: ['HtmlWebpackCompiler']
})
```

--------------------------------

### AMD Require Patterns in JavaScript

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

Demonstrates synchronous and asynchronous module loading using AMD's `define` and `require` functions, as well as CommonJS `require` within an AMD context. This pattern is fundamental for organizing Dojo applications.

```javascript
// Synchronous require (after first define)
define(['dojo/ready'], function(ready) {
  ready(function() {
    var dom = require('dojo/dom');  // Dojo synchronous require
    var node = dom.byId('app-root');
  });
});

// Asynchronous require with callback
require(['app/widgets/Dialog', 'app/models/User'], function(Dialog, User) {
  var user = new User({ id: 123 });
  var dialog = new Dialog({
    title: 'User Profile',
    content: user.render()
  });
  dialog.show();
});

// CommonJS require before define
var lodash = require('lodash');  // CommonJS require
var moment = require('moment');

define(['dojo/dom-construct'], function(domConstruct) {
  var query = cjsRequire('async');  // CommonJS require inside AMD

  return {
    process: function(data) {
      var formatted = moment(data.timestamp).format('LLLL');
      return lodash.map(data.items, function(item) {
        return { date: formatted, item: item };
      });
    }
  };
});
```

--------------------------------

### Build Dojo Loader via Node Command

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Shows how to manually build the Dojo loader using a Node.js command script. Requires the Dojo util directory as a sibling to the dojo directory. Produces a built loader in the specified release directory.

```shell
node node_modules/dojo-webpack-plugin/buildDojo/build.js node_modules/dojo/dojo.js ./release
```

--------------------------------

### Demonstrate global vs context-sensitive require in Dojo

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

Illustrates the difference between context-sensitive require inside AMD modules and global require calls, including how to configure a globalContext in DojoWebpackPlugin and use ScopedRequirePlugin to avoid polluting the window object. Helpful for managing module resolution in complex Webpack builds.

```javascript
// Context-sensitive require (default in AMD modules)
define(['require'], function(require) {
  var sibling = require('./sibling-module');
  var child = require('./subdir/child-module');

  var templateUrl = require.toUrl('./templates/widget.html');
  var dataUrl = require.toUrl('../data/config.json');

  return {
    init: function() {
      console.log('Template at:', templateUrl);
    }
  };
});

// Global require (window.require)
require(['./modules/app'], function(app) {
  app.start();
});

// webpack.config.js with globalContext
const DojoWebpackPlugin = require('dojo-webpack-plugin');
const path = require('path');

new DojoWebpackPlugin({
  loaderConfig: require('./loaderConfig'),
  globalContext: path.join(__dirname, 'js'),  // Resolve global requires from js/
  locales: ['en']
});

// ScopedRequirePlugin for non-global require
plugins: [
  new DojoWebpackPlugin({
    loaderConfig: require('./loaderConfig'),
    locales: ['en']
  }),
  new DojoWebpackPlugin.ScopedRequirePlugin()
];
```

--------------------------------

### Handling Dojo Dependencies in Webpack Entry Module

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Illustrates how to replicate the functionality of Dojo's `deps` and `callback` properties from `dojoConfig` by requiring dependencies directly in the webpack entry module. This ensures that dependencies are loaded and initialized before the rest of the application code.

```javascript
// entry.js
require(/* dojoConfig.deps */ ['dep1', 'dep2'], function(dep1, dep2) {
	// dojoConfig.callback code here
});
```

--------------------------------

### Loading Text Resources with dojo/text

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

Shows how to load external text files, such as HTML templates and JSON configurations, directly into modules using the `dojo/text` plugin. This simplifies the process of managing static assets.

```javascript
// Loading HTML template
define(['dojo/text!app/templates/widget.html'], function(template) {
  return {
    render: function(data) {
      var html = template.replace(/\${\w+}/g, function(match, key) {
        return data[key] || '';
      });
      return html;
    }
  };
});

// Loading JSON data
define([
  'dojo/text!app/config/settings.json',
  'dojo/text!app/templates/dialog.html'
], function(settingsJson, dialogTemplate) {
  var settings = JSON.parse(settingsJson);

  return {
    createDialog: function() {
      return dialogTemplate
        .replace('${title}', settings.appName)
        .replace('${version}', settings.version);
    }
  };
});

// Custom loader implementation
// loaders/dojo/text/index.js automatically handles text resources
// No additional configuration needed - plugin registers alias automatically
```

--------------------------------

### Webpack Configuration for Dojo Application (JavaScript)

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

This Webpack configuration file sets up the build process for a Dojo 1.x application. It utilizes `dojo-webpack-plugin` to integrate Dojo's AMD loader with Webpack's module system. Key features include defining entry points, output paths, optimization strategies for code splitting, and integrating various Webpack plugins for CSS handling and HTML generation. Dependencies include `path`, `webpack`, `dojo-webpack-plugin`, and `html-webpack-plugin`.

```javascript
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const DojoWebpackPlugin = require('dojo-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',

  entry: './js/bootstrap.js',

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js'
  },

  optimization: {
    moduleIds: 'natural',  // Avoid issues with has! expressions
    splitChunks: {
      cacheGroups: {
        dojo: {
          test: /[\\/]node_modules[\\/]dojo/,
          name: 'dojo',
          chunks: 'all'
        }
      }
    }
  },

  plugins: [
    new DojoWebpackPlugin({
      loaderConfig: require('./js/loaderConfig'),
      environment: { dojoRoot: 'node_modules/dojo' },
      buildEnvironment: { dojoRoot: './release/dojo' },
      locales: ['en', 'es'],
      async: true,
      globalContext: path.join(__dirname, 'js')
    }),

    new webpack.NormalModuleReplacementPlugin(
      /^dojox\/gfx\/renderer!/,
      'dojox/gfx/canvas'
    ),

    new HtmlWebpackPlugin({
      template: './index.html',
      inject: 'body'
    })
  ],

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

```

--------------------------------

### Dojo Loader Configuration (JavaScript)

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

This JavaScript module defines the configuration for the Dojo loader, used within the Webpack build. It specifies the base URL for Dojo packages and lists the packages to be included, such as 'dojo', 'dijit', 'dojox', and a custom 'app' package. It also allows for environment-specific configurations, like specifying the `dojoRoot` path. Dependencies are standard Node.js module exports.

```javascript
// js/loaderConfig.js
module.exports = function(env) {
  return {
    baseUrl: env && env.dojoRoot || 'node_modules/dojo',
    packages: [
      { name: 'dojo', location: env && env.dojoRoot || 'node_modules/dojo' },
      { name: 'dijit', location: 'node_modules/dijit' },
      { name: 'dojox', location: 'node_modules/dojox' },
      { name: 'app', location: 'js/app', main: 'main' }
    ],
    has: {
      'dojo-config-api': false,
      'dojo-debug-messages': false
    }
  };
};

```

--------------------------------

### AMD Module Definitions for Dojo Webpack Plugin

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

Showcases various standard AMD module definition patterns supported by the dojo-webpack-plugin. This includes simple defines with dependencies, defines using require and module objects for introspection, and anonymous defines.

```javascript
// Simple define with dependencies
define(['dojo/query', 'dojo/dom', 'app/utils'], function(query, dom, utils) {
  return {
    init: function() {
      var nodes = query('.active');
      dom.byId('container').innerHTML = utils.render(nodes);
    }
  };
});

// Define with module.id reference
define(['require', 'module'], function(require, module) {
  console.log('Module ID:', module.id);
  var contextDependent = require('./relative-module');
  return {
    getModulePath: function() {
      return require.toUrl('./resources/data.json');
    }
  };
});

// Anonymous define
define(function() {
  return {
    value: 42,
    compute: function(x) { return x * this.value; }
  };
});

```

--------------------------------

### Has.js Feature Detection for Conditional Loading

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

Illustrates how to use `dojo/has` for build-time and runtime feature detection to conditionally load modules. This enables optimized builds by including only necessary code based on target environments or features.

```javascript
// Build-time feature evaluation
define([
  'dojo/has!foo?app/foo-impl:app/bar-impl',
  'dojo/has!touch?app/mobile:app/desktop',
  'dojo/has!webkit?app/webkit-specific'
], function(implementation, deviceUI, browserSpecific) {
  return {
    init: implementation.init,
    render: deviceUI.render
  };
});

// Complex feature expressions
define([
  'dojo/has!foo&bar?app/both:app/neither',
  'dojo/has!ie<9?app/ie-legacy:app/modern',
  'dojo/has!svg|canvas?app/graphics:app/fallback'
], function(impl, browserSupport, graphics) {
  return {
    supported: graphics !== undefined
  };
});
```

```javascript
// webpack.config.js
new DojoWebpackPlugin({
  loaderConfig: {
    has: {
      'production': true,      // Evaluated at build time
      'debug': false,          // Evaluated at build time
      'custom-feature': null   // Undefined - evaluated at runtime
    }
  },
  runtimeFeatures: ['debug'],  // Force runtime evaluation for testing
  coerceUndefinedToFalse: false
})
```

--------------------------------

### Async AMD Module Loading with Promises

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

This snippet demonstrates how to enable asynchronous AMD module loading in Dojo Webpack Plugin using ES6 Promises. It shows configuring the plugin with `async: true`, defining AMD modules that return Promises, and consuming these asynchronous modules from CommonJS environments using `dojo-webpack-plugin/cjs/unwrapPromiseValue`. It also includes a polyfill for ES6 Promises for older browsers like IE11.

```javascript
// webpack.config.js with async mode
new DojoWebpackPlugin({
  loaderConfig: require('./loaderConfig'),
  async: true,  // Enable async AMD definitions
  locales: ['en']
})

// AMD module that returns a Promise
define(['dojo/request/xhr'], function(xhr) {
  return xhr.get('/api/data', { handleAs: 'json' });
  // Module value is a Promise
});

// Loading async modules from CommonJS
// entry.js (CommonJS module)
const unwrap = require('dojo-webpack-plugin/cjs/unwrapPromiseValue');

Promise.resolve(require('app/asyncModule'))
  .then(wrapped => unwrap(wrapped))
  .then(module => {
    module.init();
    console.log('Module loaded:', module);
  })
  .catch(err => console.error('Failed to load module:', err));

// ES6 Promise polyfill for IE11
// bootstrap.js
require(['dojo-webpack-plugin/amd/dojoES6Promise'], function() {
  require(['app/main'], function(app) {
    app.init();
  });
});

// Async loader proxy example
define(['dojo/loaderProxy?loader=app/asyncLoader&deps=dojo/text%21data.json!data.json'],
function(data) {
  // Plugin automatically handles promise resolution
  console.log('Data loaded:', data);
});
```

--------------------------------

### Asynchronous AMD Module Loading from CommonJS (JavaScript)

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Demonstrates the recommended way to load AMD modules from within a CommonJS module when using the async option with dojo/loaderProxy. It emphasizes using Promises to handle potentially unresolved module loads, preventing issues with un-resolved promises.

```javascript
// From within a CommonJS module
Promise.resolve(require('myAmdModule')).then(function(myAmdModule) {
	myAmdModule.doSomething();
});
```

--------------------------------

### Configure module replacement and aliasing with DojoWebpackPlugin

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

Shows how to set up DojoWebpackPlugin with loaderConfig map and aliases, and use Webpack's NormalModuleReplacementPlugin to replace module expressions. This configuration enables mapping legacy modules to modern ones and customizing module resolution. Requires dojo-webpack-plugin and webpack.

```javascript
// webpack.config.js
const DojoWebpackPlugin = require('dojo-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  plugins: [
    new DojoWebpackPlugin({
      loaderConfig: {
        baseUrl: '.',
        packages: [
          { name: 'dojo', location: 'node_modules/dojo' },
          { name: 'app', location: 'js/app' }
        ],
        map: {
          '*': {
            'legacy/oldModule': 'modern/newModule'
          },
          'app/specificModule': {
            'dependency': 'alternative-dependency'
          }
        },
        aliases: [
          ['xhr', 'dojo/request/xhr'],
          ['text', 'dojo/text']
        ]
      },
      locales: ['en']
    }),

    // Replace entire module expressions
    new webpack.NormalModuleReplacementPlugin(
      /^dojox\/gfx\/renderer!/,
      'dojox/gfx/canvas'
    ),

    // Replace with conditional logic
    new webpack.NormalModuleReplacementPlugin(
      /^dojo\/text!/,
      function(data) {
        data.request = data.request.replace(/^dojo\/text!/, '!!raw-loader!');
      }
    )
  ]
};

// Using module map in code
define(['legacy/oldModule'], function(module) {
  // Actually loads 'modern/newModule' due to map configuration
  return module.doSomething();
});
```

--------------------------------

### CommonJS vs Dojo Synchronous Require Handling

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Demonstrates the difference between CommonJS require and Dojo's synchronous require within an AMD module. CommonJS require is used for external modules, while Dojo's synchronous require is for already loaded Dojo modules. The plugin treats require calls after the first define as Dojo synchronous require, and before define or via cjsRequire as CommonJS require.

```javascript
var lodash = require("lodash");			// CommonJS require
define([], function() {
	var query = require("dojo/query");	// Dojo synchronous require
	var async = cjsRequire("async");	// CommonJS require
});
```

--------------------------------

### Build Dojo Loader with Overridden Features

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Command to build the Dojo loader with customized has.js features, such as disabling dojo-config-api. Passes a JSON string as the third argument. Overrides default features to reduce loader size.

```shell
node node_modules/dojo-webpack-plugin/buildDojo/build.js node_modules/dojo/dojo.js ./release {"dojo-config-api":false}
```

--------------------------------

### Dojo-Webpack-Plugin Automatic Replacements

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

This code defines automatic loader extension replacements provided by the `dojo-webpack-plugin`. It uses `NormalModuleReplacementPlugin` to map Dojo loader extensions like `dojo/selector/_loader!default`, `dojo/request/default`, and `dojo/query` to their corresponding Webpack or proxied equivalents.

```javascript
new webpack.NormalModuleReplacementPlugin(/^dojo\/selector\/_loader!default$/, "dojo\/selector\/lite"),
new webpack.NormalModuleReplacementPlugin(/^dojo\/request\/default!$/, "dojo\/request\/xhr"),
new webpack.NormalModuleReplacementPlugin(/^dojo\/query!/, data => {
		var match = /^dojo\/query!(.*)$/.exec(data.request);
		data.request = "dojo\/loaderProxy?loader=dojo\/query&name=" + match[1] + "&absMid=dojo\/query%21" + match[1] + "!";
})
```

--------------------------------

### Proxy Custom Dojo Loaders with Webpack

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

This snippet shows how to create a proxy for custom Dojo loaders to run them on the client-side using Webpack. It involves defining a custom loader (e.g., for SVG) and configuring Webpack's `NormalModuleReplacementPlugin` to route requests for the custom loader through `dojo/loaderProxy`. This allows using custom file types within Dojo AMD modules.

```javascript
// Custom SVG loader: js/loaders/svg.js
define(['dojo/text'], function(text) {
  return {
    load: function(name, req, callback) {
      req(['dojo/text!' + name], function(content) {
        // Strip XML header and trim whitespace
        var cleaned = content.replace(/<\?xml[^>]*\?>/g, '').trim();
        callback(cleaned);
      });
    }
  };
});

// Webpack config to proxy the custom loader
const webpack = require('webpack');

new webpack.NormalModuleReplacementPlugin(
  /^svg!/,
  function(data) {
    var match = /^svg!(.*)$/.exec(data.request);
    var resource = match[1];
    data.request = 'dojo/loaderProxy?loader=js/loaders/svg&deps=dojo/text%21'
                   + resource + '!' + resource;
  }
);

// Using the proxied loader
define(['svg!assets/icons/close.svg'], function(closeSvg) {
  return {
    getIcon: function() {
      return closeSvg;  // Returns cleaned SVG content
    }
  };
});

// Complex loader proxy with multiple dependencies
new webpack.NormalModuleReplacementPlugin(
  /^custom!/,
  function(data) {
    var match = /^custom!(.*)$/.exec(data.request);
    data.request = 'dojo/loaderProxy?loader=app/customLoader'
                 + '&deps=dojo/text%21' + match[1]
                 + ',app/processor'
                 + '&name=' + match[1]
                 + '!' + match[1];
  }
);
```

--------------------------------

### Unwrap Promise Values from AMD Modules

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Demonstrates how to unwrap promise values returned by AMD modules when using CommonJS require. This handles the special case where an AMD module returns a promise that needs to be resolved properly in a CommonJS context.

```javascript
// From within a CommonJS module
const unwrap = require('dojo-webpack-plugin/cjs/unwrapPromiseValue');

Promise.resolve(require("amdModuleThatHasPromiseValue"))
  .then(wrapped => unwrap(wrapped))
  .then(resolved => {
		resolved.doSomething();
	});
```

--------------------------------

### Loader Configuration as Module for Dojo Webpack Plugin

Source: https://context7.com/openntf/dojo-webpack-plugin/llms.txt

Illustrates how to externalize loader configuration into a separate module (loaderConfig.js) and import it into the webpack configuration. This approach enhances modularity for complex loader settings, including environment-specific configurations.

```javascript
// loaderConfig.js
module.exports = function(env) {
  return {
    baseUrl: env && env.dojoRoot || 'node_modules/dojo',
    packages: [
      { name: 'dojo', location: env && env.dojoRoot || 'node_modules/dojo' },
      { name: 'dijit', location: 'node_modules/dijit' },
      { name: 'app', location: 'js/app', main: 'main' }
    ],
    paths: {
      'vendor': 'js/vendor'
    },
    has: {
      'dojo-firebug': false,
      'dojo-debug-messages': false
    }
  };
};

// webpack.config.js
const DojoWebpackPlugin = require('dojo-webpack-plugin');

module.exports = {
  plugins: [
    new DojoWebpackPlugin({
      loaderConfig: require('./loaderConfig'),
      environment: { dojoRoot: 'node_modules/dojo' },
      buildEnvironment: { dojoRoot: './release/dojo' },
      locales: ['en']
    })
  ]
};

```

--------------------------------

### Configuring DojoWebpackPlugin with loaderConfig

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Shows how to configure the DojoWebpackPlugin with the loaderConfig option. This option allows specifying Dojo's loader configuration, including baseUrl, packages, paths, map, aliases, and has features. The loader config can be provided as an object, a function, or a CommonJS module name.

```javascript
const DojoWebpackPlugin = require('dojo-webpack-plugin');
//...
plugins: [
	new DojoWebpackPlugin({
		loaderConfig: require("./loaderConfig"),
		locales: ["en", "es", "fr"]
	})
	//...
]
```

--------------------------------

### Conditional Module Loading with dojo/has

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Demonstrates how to use the dojo/has loader extension to conditionally load modules based on feature flags. The module `js/foo` is loaded if the `foo` feature is truthy, otherwise `js/bar` is loaded. If `foo` is undefined at build time, resolution is deferred to runtime.

```javascript
define(['dojo/has!foo?js/foo:js/bar'], function(foobar) {
	//...
});
```

--------------------------------

### Replace Dojo Renderer Loader with Canvas Module

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

This snippet shows how to replace the Dojo `dojox/gfx/renderer` loader extension with a specific module, `dojox/gfx/canvas`, using `NormalModuleReplacementPlugin`. This is applicable when runtime conditions allow for a fixed renderer, simplifying the build by avoiding dynamic loading.

```javascript
new webpack.NormalModuleReplacementPlugin(/^dojox\/gfx\/renderer!/, "dojox/gfx/canvas")
```

--------------------------------

### Configure ScopedRequirePlugin in Webpack Config

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

This code shows how to register the ScopedRequirePlugin plugin after dojo-webpack-plugin in a webpack.config.js file. It prevents overwriting window.require and instead defines a scoped require that encloses each AMD module. The plugin should be used when avoiding global require overwrites is necessary.

```javascript
const DojoWebpackPlugin = require('dojo-webpack-plugin');
  // ...
  plugins: [
    new DojoWebpackPlugin({
      loaderConfig: {/*...*/},
      locales: [/*...*/]
    }),
    new DojoWebpackPlugin.ScopedRequirePlugin()
  ]
```

--------------------------------

### Disabling Named Module IDs in Webpack

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Configures Webpack's optimization settings to disable named module IDs, changing them to 'natrual'. This is recommended when using dojo/has loader expressions to prevent parsing issues caused by module IDs containing '?' and ':' characters.

```javascript
optimization: {
	moduleIds: 'natrual'
}
```

--------------------------------

### Disable dojo-config-api in JavaScript

Source: https://github.com/openntf/dojo-webpack-plugin/blob/master/README.md

Disables the Dojo config API to reduce bootstrap code size. Only works when loaderConfig is specified as an object or function, not as a module name. The pre-processed config objects are not serialized to the application.

```javascript
plugins: [
	new DojoWebpackPlugin({
		loaderConfig: {
			paths: {/*...*/},
			packages: [/*...*/],
			has: {'dojo-config-api':false}
		}
		// ...
	})
]
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.