# example .env.prod file
MY_API_ENDPOINT=https://production-api-host/api/v2
MY_API_SECRET=verysuperverysecretverytoken
```

Running the app would allow you to access these variables through `process.env.<VARIABLE_NAME>`.

Note

Please note that the way DotEnv works is it's using the webpack [DefinePlugin](https://docs.nativescript.org/configuration/webpack#extending-the-defineplugin-options) internally to define the `process.env.<VARIABLE_NAME>` values, meaning they are essentially statically replaced in the bundled code. This is important to keep in mind because destructuring, or looping over `process` or `process.env` is not possible.

See details about the limitations in the [DotEnv documentation](https://github.com/mrsteele/dotenv-webpack#limitations)

```ts
// default, no flags - loaded from .env by default

console.log(process.env.MY_API_ENDPOINT) // https://staging-api-host/api/v2
console.log(process.env.MY_API_SECRET) // supersecrettoken
```

```ts
// With --env.env=prod: loaded from .env.prod

console.log(process.env.MY_API_ENDPOINT) // https://production-api-host/api/v2
console.log(process.env.MY_API_SECRET) // verysuperverysecretverytoken
```

```ts
// With --env.env=nonexistent: falls back to .env

console.log(process.env.MY_API_ENDPOINT) // https://staging-api-host/api/v2
console.log(process.env.MY_API_SECRET) // supersecrettoken
```

## Configuration examples [​](https://docs.nativescript.org/configuration/webpack\#configuration-examples)

Here are some common examples of things you may want to do in your `webpack.config.js`.

Note that the config is built using [webpack-chain](https://github.com/neutrinojs/webpack-chain), so the `config` variable in all the examples below are instances of a chainable config. You can find more examples in webpack-chain's documentation as well as read the [source of the base configs](https://github.com/NativeScript/NativeScript/tree/fb2c29106378f21583d890174f1c5a6bca6e6b8a/packages/webpack5/src/configuration) to see how we implemented them.

### Adding a copy rule [​](https://docs.nativescript.org/configuration/webpack\#adding-a-copy-rule)

js

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

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

  // Example: copy all markdown files to the build directory
  webpack.Utils.addCopyRule('**/*.md')

  // Example: copy all files from a dependency
  webpack.Utils.addCopyRule({
    from: '@nativescript/webpack/stubs',
    to: 'custom/location',
    // the context of the "from" rule, in this case node_modules
    // we used the getProjectFilePath util here, but this could have been
    // a path.resolve(__dirname, 'node_modules') too.
    context: webpack.Utils.project.getProjectFilePath('node_modules'),
  })

  return webpack.resolveConfig()
}
```

For all the valid options you can pass, refer to the [CopyWebpackPlugin Documentation](https://webpack.js.org/plugins/copy-webpack-plugin/#patterns)

### Adding a plugin [​](https://docs.nativescript.org/configuration/webpack\#adding-a-plugin)

js

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

// import the plugin first
const { BannerPlugin } = require('webpack')

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

  // first we add our callback to the internal chain
  webpack.chainWebpack((config) => {
    // we add the plugin
    config.plugin('BannerPlugin').use(BannerPlugin, [\
      {\
        banner: 'hello world',\
      },\
    ])
  })

  return webpack.resolveConfig()
}
```

The second argument of the `.use` call is an array of arguments you would pass to the plugin. For example, the above example is converted from the official BannerPlugin docs that stated the following:

js

```
new webpack.BannerPlugin({
  banner: 'hello world',
})
```

### Adding a resolver plugin [​](https://docs.nativescript.org/configuration/webpack\#adding-a-resolver-plugin)

js

```
const webpack = require('@nativescript/webpack')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

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

  webpack.chainWebpack((config) => {
    config.resolve.plugin('TsconfigPathsPlugin').use(TsconfigPathsPlugin)
  })

  return webpack.resolveConfig()
}
```

### Adding a loader [​](https://docs.nativescript.org/configuration/webpack\#adding-a-loader)

js

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

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

  webpack.chainWebpack((config) => {
    // add a new rule for *.something files
    config.module
      .rule('something')
      .test(/\.something$/)
      .use('something-loader')
      .loader('something-loader')
      .options({
        example: true,
      })
  })

  return webpack.resolveConfig()
}
```

### Adding Externals [​](https://docs.nativescript.org/configuration/webpack\#adding-externals)

js

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

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

  webpack.chainWebpack((config) => {
    config.externals(
      // make sure to keep pre-defined externals
      config.get('externals').concat([\
        // add your own externals\
        'some-external-dependency',\
      ]),
    )
  })

  return webpack.resolveConfig()
}
```

### Adding path aliases [​](https://docs.nativescript.org/configuration/webpack\#adding-path-aliases)

You can define `import`-aliases for specific source directories.

js

```
const webpack = require('@nativescript/webpack')
const { resolve } = require('path')

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

  webpack.chainWebpack((config) => {
    // change the "@" alias to "app/libs"
    config.resolve.alias.set('@', resolve(__dirname, 'app/libs'))
  })

  return webpack.resolveConfig()
}
```

### Extending the DefinePlugin options [​](https://docs.nativescript.org/configuration/webpack\#extending-the-defineplugin-options)

js

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

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

  webpack.chainWebpack((config) => {
    config.plugin('DefinePlugin').tap((args) => {
      Object.assign(args[0], {
        'global.isProduction': !!env.production,
        'global.someNumber': 42,
        'global.someString': JSON.stringify('some string value'),
      })

      return args
    })
  })

  return webpack.resolveConfig()
}
```

### Changing an existing rule [​](https://docs.nativescript.org/configuration/webpack\#changing-an-existing-rule)

To change an existing rule, it's useful to know how it has been set up first:

```bash
ns prepare android|ios --env.verbose