|
1 | | -@nativescript/webpack rewrite |
2 | | - |
3 | | -The rewrite allows us to simplify things, and introduce some breaking changes. |
4 | | -Listing them here, so we can keep track of them - will be in the merge commit, and the release notes once we are ready. |
5 | | - |
6 | | -BREAKING CHANGES: |
7 | | - - `package.json` main should now use a relative path to the package.json instead of the app directory |
8 | | - |
9 | | - For example (given we have a `src` directory where our app is): |
10 | | - |
11 | | - `"main": "app.js"` becomes `"main": "src/app.js"` **OR** `"main": "src/app.ts"` (whether using JS or TS) |
12 | | - |
13 | | - This simplifies things, and will allow ctrl/cmd + clicking on the filename in some editors. |
14 | | - |
15 | | - - `postinstall` scripts have been removed. |
16 | | - |
17 | | - The configuration will not need to change in the user projects between updates. |
18 | | - |
19 | | - For existing projects we will provide an easy upgrade path, through `ns migrate` and a binary in the package. |
20 | | - |
21 | | - For new projects `ns create` should create the config file by invoking a binary in the package. |
22 | | - |
23 | | - - removed resolutions for short imports - use full imports instead. |
24 | | - |
25 | | - For example: |
26 | | - ``` |
27 | | - import http from 'http' |
28 | | - // becomes |
29 | | - import { http } from '@nativescript/core' |
30 | | - ``` |
| 1 | +<p align="center"> |
| 2 | + <a href="https://nativescript.org"> |
| 3 | + <img alt="NativeScript" src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Dark_Transparent.png" width="100"/> |
| 4 | + </a> |
| 5 | +</p> |
| 6 | + |
| 7 | +<h1 align="center">@nativescript/webpack</h1> |
| 8 | + |
| 9 | +<p align="center"> |
| 10 | + <b>Webpack configuration for NativeScript apps.</b> |
| 11 | +</p> |
| 12 | + |
| 13 | +<p align="center"> |
| 14 | + <a href="https://www.npmjs.com/package/@nativescript/webpack"><img src="https://img.shields.io/npm/v/@nativescript/webpack.svg" alt="npm version"></a> |
| 15 | + <a href="https://github.com/NativeScript/NativeScript/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license"></a> |
| 16 | + <a href="https://www.npmjs.com/package/@nativescript/webpack"><img src="https://img.shields.io/npm/dm/@nativescript/webpack.svg" alt="downloads"></a> |
| 17 | +</p> |
| 18 | + |
| 19 | +<p align="center"> |
| 20 | + <a href="https://docs.nativescript.org/configuration/webpack">Documentation</a> · |
| 21 | + <a href="https://docs.nativescript.org/setup/">Environment Setup</a> · |
| 22 | + <a href="https://github.com/NativeScript/NativeScript/blob/main/tools/notes/CONTRIBUTING.md">Contribute</a> · |
| 23 | + <a href="https://nativescript.org/discord">Community</a> |
| 24 | +</p> |
| 25 | + |
| 26 | +--- |
| 27 | + |
| 28 | +All NativeScript applications are bundled using webpack. This package provides the required configuration to build NativeScript apps with flexibility to customize as needed. |
| 29 | + |
| 30 | +## 📦 Installation |
| 31 | + |
| 32 | +```bash |
| 33 | +npm install @nativescript/webpack --save-dev |
| 34 | +``` |
| 35 | + |
| 36 | +## 🚀 Quick Start |
| 37 | + |
| 38 | +All new projects come with a base `webpack.config.js` that's pre-configured: |
| 39 | + |
| 40 | +```js |
| 41 | +const webpack = require('@nativescript/webpack') |
| 42 | + |
| 43 | +module.exports = (env) => { |
| 44 | + webpack.init(env) |
| 45 | + |
| 46 | + // Learn how to customize: |
| 47 | + // https://docs.nativescript.org/webpack |
| 48 | + |
| 49 | + return webpack.resolveConfig() |
| 50 | +} |
| 51 | +``` |
| 52 | + |
| 53 | +## ✨ Features |
| 54 | + |
| 55 | +- **Auto-discovery**: Automatically detects your project type (TypeScript, Angular, Vue, React, Svelte) |
| 56 | +- **Hot Module Replacement**: HMR enabled by default for faster development |
| 57 | +- **DotEnv Support**: Built-in support for `.env` files to manage environment variables |
| 58 | +- **Bundle Analysis**: Generate bundle reports with `--env.report` |
| 59 | +- **Production Optimization**: Minification with Terser in production mode |
| 60 | + |
| 61 | +## 🔧 Global Variables |
| 62 | + |
| 63 | +Useful globally available variables in your app: |
| 64 | + |
| 65 | +| Variable | Description | |
| 66 | +|----------|-------------| |
| 67 | +| `__DEV__` | `true` when building in development mode | |
| 68 | +| `global.isAndroid` / `__ANDROID__` | `true` when platform is Android | |
| 69 | +| `global.isIOS` / `__IOS__` | `true` when platform is iOS | |
| 70 | +| `global.isVisionOS` / `__VISIONOS__` | `true` when platform is visionOS | |
| 71 | +| `global.__APPLE__` | `true` when platform is iOS or visionOS | |
| 72 | + |
| 73 | +## 📚 API |
| 74 | + |
| 75 | +### Core Methods |
| 76 | + |
| 77 | +| Method | Description | |
| 78 | +|--------|-------------| |
| 79 | +| `webpack.init(env)` | Initialize the internal env object (required) | |
| 80 | +| `webpack.chainWebpack(chainFn)` | Add chain functions to modify config | |
| 81 | +| `webpack.mergeWebpack(obj)` | Merge objects into the final config | |
| 82 | +| `webpack.resolveConfig()` | Resolve the final webpack configuration | |
| 83 | + |
| 84 | +## 🎛️ CLI Flags |
| 85 | + |
| 86 | +| Flag | Description | |
| 87 | +|------|-------------| |
| 88 | +| `--no-hmr` | Disable Hot Module Replacement | |
| 89 | +| `--env.production` | Enable production mode with minification | |
| 90 | +| `--env.report` | Generate bundle analysis report | |
| 91 | +| `--env.verbose` | Print verbose logs and internal config | |
| 92 | +| `--env.e2e` | Enable E2E mode (enables `testID` property) | |
| 93 | + |
| 94 | +## 📖 Documentation |
| 95 | + |
| 96 | +For complete documentation including configuration examples, visit the [webpack configuration guide](https://docs.nativescript.org/configuration/webpack). |
| 97 | + |
| 98 | +## 📄 License |
| 99 | + |
| 100 | +[MIT licensed](https://github.com/NativeScript/NativeScript/blob/main/LICENSE). |
0 commit comments