Webpack configuration for NativeScript apps.

Documentation · Environment Setup · Contribute · Community

All NativeScript applications are bundled using webpack. This package provides the required configuration to build NativeScript apps with flexibility to customize as needed.

npm install @nativescript/webpack --save-dev

All new projects come with a base webpack.config.js that's pre-configured:

const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  // Learn how to customize:
  // https://docs.nativescript.org/webpack

  return webpack.resolveConfig()
}

• Auto-discovery: Automatically detects your project type (TypeScript, Angular, Vue, React, Svelte)
• Hot Module Replacement: HMR enabled by default for faster development
• DotEnv Support: Built-in support for .env files to manage environment variables
• Bundle Analysis: Generate bundle reports with --env.report
• Production Optimization: Minification with Terser in production mode

Useful globally available variables in your app:

The NativeScript runtimes provide builtin modules under the ns: scheme (ns:util, ns:module, ns:worker_threads, …) and resolve them themselves. NativeScriptBuiltinModulesPlugin leaves every ns: import as-is in the bundle, including modules added in future runtime versions.

Customize it with webpack-chain. For example, to also use the runtime's node: shims (only list the ones your runtime version ships; other node: imports fail the build):

const { NormalModuleReplacementPlugin } = require('webpack');

webpack.chainWebpack((config) => {
	config.plugin('NativeScriptBuiltinModulesPlugin').tap(() => [
		{ include: [/^ns:/, 'node:worker_threads'] },
	]);

	// libraries often import the bare name
	config
		.plugin('ForwardWorkerThreads')
		.use(NormalModuleReplacementPlugin, [/^worker_threads$/, 'node:worker_threads']);
});

To polyfill a builtin instead (e.g. for a runtime that doesn't ship it), redirect it with a replacement plugin. The builtin check runs after replacement plugins, so the polyfill gets bundled:

webpack.chainWebpack((config) => {
	config
		.plugin('PolyfillNsUrl')
		.use(NormalModuleReplacementPlugin, [/^ns:url$/, require.resolve('./polyfills/ns-url.js')]);
});

resolve.alias doesn't apply here: webpack treats ns:util as a URL scheme and skips resolution.

For complete documentation including configuration examples, visit the webpack configuration guide.

MIT licensed.