const { join, relative, resolve, sep } = require("path"); const webpack = require("webpack"); const nsWebpack = require("nativescript-dev-webpack"); const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); const CleanWebpackPlugin = require("clean-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin"); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const svelteNativePreprocessor = require("svelte-native-preprocessor"); module.exports = env => { // Add your custom Activities, Services and other Android app components here. const appComponents = [ "tns-core-modules/ui/frame", "tns-core-modules/ui/frame/activity", ]; const platform = env && (env.android && "android" || env.ios && "ios"); if (!platform) { throw new Error("You need to provide a target platform!"); } const platforms = ["ios", "android"]; const projectRoot = __dirname; // Default destination inside platforms//... const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot)); const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS"; const { // The 'appPath' and 'appResourcesPath' values are fetched from // the nsconfig.json configuration file // when bundling with `tns run android|ios --bundle`. appPath = "app", appResourcesPath = "app/App_Resources", // You can provide the following flags when running 'tns run android|ios' snapshot, // --env.snapshot uglify, // --env.uglify report, // --env.report sourceMap, // --env.sourceMap hmr, // --env.hmr, } = env; const externals = nsWebpack.getConvertedExternals(env.externals); const appFullPath = resolve(projectRoot, appPath); const appResourcesFullPath = resolve(projectRoot, appResourcesPath); const entryModule = nsWebpack.getEntryModule(appFullPath); const entryPath = `.${sep}${entryModule}.ts`; const config = { mode: uglify ? "production" : "development", context: appFullPath, externals, watchOptions: { ignored: [ appResourcesFullPath, // Don't watch hidden files "**/.*", ] }, target: nativescriptTarget, entry: { bundle: entryPath, }, output: { pathinfo: false, path: dist, libraryTarget: "commonjs2", filename: "[name].js", globalObject: "global", }, resolve: { extensions: [".ts", ".mjs", ".js", ".scss", ".css"], // Resolve {N} system modules from tns-core-modules modules: [ resolve(__dirname, "node_modules/tns-core-modules"), resolve(__dirname, "node_modules"), "node_modules/tns-core-modules", "node_modules", ], alias: { '~': appFullPath }, // resolve symlinks to symlinked modules symlinks: true }, resolveLoader: { // don't resolve symlinks to symlinked loaders symlinks: false }, node: { // Disable node shims that conflict with NativeScript "http": false, "timers": false, "setImmediate": false, "fs": "empty", "__dirname": false, }, devtool: sourceMap ? "inline-source-map" : "none", optimization: { splitChunks: { cacheGroups: { vendor: { name: "vendor", chunks: "all", test: (module, chunks) => { const moduleName = module.nameForCondition ? module.nameForCondition() : ''; return /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some(comp => comp === moduleName); }, enforce: true, }, } }, minimize: !!uglify, minimizer: [ new UglifyJsPlugin({ parallel: true, cache: true, uglifyOptions: { output: { comments: false, }, compress: { // The Android SBG has problems parsing the output // when these options are enabled 'collapse_vars': platform !== "android", sequences: platform !== "android", } } }) ], }, module: { rules: [ { test: new RegExp(entryPath), use: [ // Require all Android app components platform === "android" && { loader: "nativescript-dev-webpack/android-app-components-loader", options: { modules: appComponents } }, { loader: "nativescript-dev-webpack/bundle-config-loader", options: { loadCss: !snapshot, // load the application css if in debug mode } }, ].filter(loader => !!loader) }, { test: /-page\.ts$/, use: "nativescript-dev-webpack/script-hot-loader" }, { test: /\.(css|scss)$/, use: "nativescript-dev-webpack/style-hot-loader" }, { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/markup-hot-loader" }, { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader"}, { test: /\.css$/, use: { loader: "css-loader", options: { minimize: false, url: false } } }, { test: /\.scss$/, use: [ { loader: "css-loader", options: { minimize: false, url: false } }, "sass-loader" ] }, { test: /\.mjs$/, type: 'javascript/auto', }, { test: /\.ts$/, use: { loader: "ts-loader", options: { configFile: "tsconfig.tns.json", allowTsInNodeModules: true, }, } }, { test: /\.svelte$/, exclude: /node_modules/, use: [ { loader: 'svelte-loader', options: { preprocess: svelteNativePreprocessor() } } ] } ] }, plugins: [ // Define useful constants like TNS_WEBPACK new webpack.DefinePlugin({ "global.TNS_WEBPACK": "true", "process": undefined, }), // Remove all files from the out dir. new CleanWebpackPlugin([ `${dist}/**/*` ]), // Copy native app resources to out dir. new CopyWebpackPlugin([ { from: `${appResourcesFullPath}/${appResourcesPlatformDir}`, to: `${dist}/App_Resources/${appResourcesPlatformDir}`, context: projectRoot }, ]), // Copy assets to out dir. Add your own globs as needed. new CopyWebpackPlugin([ { from: { glob: "fonts/**" } }, { from: { glob: "**/*.jpg" } }, { from: { glob: "**/*.png" } }, ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), // Generate a bundle starter script and activate it in package.json new nsWebpack.GenerateBundleStarterPlugin([ "./vendor", "./bundle", ]), // For instructions on how to set up workers with webpack // check out https://github.com/nativescript/worker-loader new NativeScriptWorkerPlugin(), new nsWebpack.PlatformFSPlugin({ platform, platforms, }), // Does IPC communication with the {N} CLI to notify events when running in watch mode. new nsWebpack.WatchStateLoggerPlugin(), ], }; if (report) { // Generate report files for bundles content config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: "static", openAnalyzer: false, generateStatsFile: true, reportFilename: resolve(projectRoot, "report", `report.html`), statsFilename: resolve(projectRoot, "report", `stats.json`), })); } if (snapshot) { config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ chunk: "vendor", requireModules: [ "tns-core-modules/bundle-entry-points", ], projectRoot, webpackConfig: config, })); } if (hmr) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); } return config; };