diff --git a/package.json b/package.json index 9ae7c4f3..02fb8878 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,9 @@ "id": "org.nativescript.nativescriptsdkexamplesng", "tns-ios": { "version": "5.4.0-2019-03-26-093523-01" + }, + "tns-android": { + "version": "5.3.1" } }, "dependencies": { @@ -53,7 +56,7 @@ "lazy": "1.0.11", "markdown-snippet-injector": "^0.2.2", "nativescript-dev-typescript": "^0.9.0", - "nativescript-dev-webpack": "^0.20.3", + "nativescript-dev-webpack": "^0.22.0-next-2019-04-17-111030-01", "opener": "^1.4.1", "rimraf": "^2.5.3", "tar.gz": "^1.0.5", diff --git a/webpack.config.js b/webpack.config.js index d2174876..6f292f0b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -11,9 +11,9 @@ 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 { AngularCompilerPlugin } = require("@ngtools/webpack"); -const hashSalt = Date.now().toString(); +const TerserPlugin = require("terser-webpack-plugin"); +const { getAngularCompilerPlugin } = require("nativescript-dev-webpack/plugins/NativeScriptAngularCompilerPlugin"); +const hashSalt = Date.now().toString(); module.exports = env => { // Add your custom Activities, Services and other Android app components here. @@ -27,6 +27,7 @@ module.exports = env => { throw new Error("You need to provide a target platform!"); } + const AngularCompilerPlugin = getAngularCompilerPlugin(platform); const projectRoot = __dirname; // Default destination inside platforms//... @@ -46,15 +47,23 @@ module.exports = env => { uglify, // --env.uglify report, // --env.report sourceMap, // --env.sourceMap + hiddenSourceMap, // --env.hiddenSourceMap hmr, // --env.hmr, + unitTesting, // --env.unitTesting } = env; + const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; const externals = nsWebpack.getConvertedExternals(env.externals); const appFullPath = resolve(projectRoot, appPath); const appResourcesFullPath = resolve(projectRoot, appResourcesPath); const tsConfigName = "tsconfig.tns.json"; - const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`; + const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`; const entryPath = `.${sep}${entryModule}`; + const entries = { bundle: entryPath }; + if (platform === "ios") { + entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules.js"; + }; + const ngCompilerTransformers = []; const additionalLazyModuleResources = []; if (aot) { @@ -82,13 +91,15 @@ module.exports = env => { const ngCompilerPlugin = new AngularCompilerPlugin({ hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]), platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule))), - mainPath: resolve(appPath, entryModule), + mainPath: join(appFullPath, entryModule), tsConfigPath: join(__dirname, tsConfigName), skipCodeGeneration: !aot, - sourceMap: !!sourceMap, + sourceMap: !!isAnySourceMapEnabled, additionalLazyModuleResources: additionalLazyModuleResources }); + let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist); + const config = { mode: uglify ? "production" : "development", context: appFullPath, @@ -101,12 +112,11 @@ module.exports = env => { ] }, target: nativescriptTarget, - entry: { - bundle: entryPath, - }, + entry: entries, output: { pathinfo: false, path: dist, + sourceMapFilename, libraryTarget: "commonjs2", filename: "[name].js", globalObject: "global", @@ -137,8 +147,9 @@ module.exports = env => { "fs": "empty", "__dirname": false, }, - devtool: sourceMap ? "inline-source-map" : "none", + devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"), optimization: { + runtimeChunk: "single", splitChunks: { cacheGroups: { vendor: { @@ -155,12 +166,14 @@ module.exports = env => { }, minimize: !!uglify, minimizer: [ - new UglifyJsPlugin({ + new TerserPlugin({ parallel: true, cache: true, - uglifyOptions: { + sourceMap: isAnySourceMapEnabled, + terserOptions: { output: { comments: false, + semicolons: !isAnySourceMapEnabled }, compress: { // The Android SBG has problems parsing the output @@ -175,7 +188,7 @@ module.exports = env => { module: { rules: [ { - test: new RegExp(entryPath), + test: nsWebpack.getEntryPathRegExp(appFullPath, entryPath), use: [ // Require all Android app components platform === "android" && { @@ -188,6 +201,9 @@ module.exports = env => { options: { angular: true, loadCss: !snapshot, // load the application css if in debug mode + unitTesting, + appFullPath, + projectRoot, } }, ].filter(loader => !!loader) @@ -200,14 +216,14 @@ module.exports = env => { test: /[\/|\\]app\.css$/, use: [ "nativescript-dev-webpack/style-hot-loader", - { loader: "css-loader", options: { minimize: false, url: false } } + { loader: "css-loader", options: { url: false } } ] }, { test: /[\/|\\]app\.scss$/, use: [ "nativescript-dev-webpack/style-hot-loader", - { loader: "css-loader", options: { minimize: false, url: false } }, + { loader: "css-loader", options: { url: false } }, "sass-loader" ] }, @@ -239,8 +255,6 @@ module.exports = env => { "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([ { @@ -249,6 +263,7 @@ module.exports = env => { context: projectRoot }, ]), + // Copy assets to out dir. Add your own globs as needed. new CopyWebpackPlugin([ { from: { glob: "ng-ui-widgets-category/web-view/web-view-html/*.html"} }, @@ -257,10 +272,16 @@ module.exports = env => { { from: { glob: "**/*.png" } }, ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), // Generate a bundle starter script and activate it in package.json - new nsWebpack.GenerateBundleStarterPlugin([ - "./vendor", - "./bundle", - ]), + new nsWebpack.GenerateBundleStarterPlugin( + // Don't include `runtime.js` when creating a snapshot. The plugin + // configures the WebPack runtime to be generated inside the snapshot + // module and no `runtime.js` module exist. + (snapshot ? [] : ["./runtime"]) + .concat([ + "./vendor", + "./bundle", + ]) + ), // For instructions on how to set up workers with webpack // check out https://github.com/nativescript/worker-loader new NativeScriptWorkerPlugin(), @@ -270,6 +291,18 @@ module.exports = env => { ], }; + // Copy the native app resources to the out dir + // only if doing a full build (tns run/build) and not previewing (tns preview) + if (!externals || externals.length === 0) { + config.plugins.push(new CopyWebpackPlugin([ + { + from: `${appResourcesFullPath}/${appResourcesPlatformDir}`, + to: `${dist}/App_Resources/${appResourcesPlatformDir}`, + context: projectRoot + }, + ])); + } + if (report) { // Generate report files for bundles content