From 00ecaa01f74e683d2f0efc17f4562f82995b4305 Mon Sep 17 00:00:00 2001 From: Martin Bektchiev Date: Tue, 12 Feb 2019 19:15:50 +0200 Subject: [PATCH 1/2] fix: Emit inspector_modules.js as a separate entry point for iOS The iOS Runtime calls it explicitly by name and it has to be emitted in `tns_modules/tns_core_modules` Refs: https://github.com/NativeScript/ios-runtime/issues/1054, https://github.com/NativeScript/ios-runtime/issues/1055 https://github.com/NativeScript/ios-runtime/issues/1056, https://github.com/NativeScript/ios-runtime/issues/1057 --- templates/webpack.angular.js | 9 ++++++--- templates/webpack.javascript.js | 8 +++++--- templates/webpack.typescript.js | 8 +++++--- templates/webpack.vue.js | 8 +++++--- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js index e8de5173..058a5619 100644 --- a/templates/webpack.angular.js +++ b/templates/webpack.angular.js @@ -54,6 +54,11 @@ module.exports = env => { const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.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) { @@ -100,9 +105,7 @@ module.exports = env => { ] }, target: nativescriptTarget, - entry: { - bundle: entryPath, - }, + entry: entries, output: { pathinfo: false, path: dist, diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js index 780e9ecd..793bba54 100644 --- a/templates/webpack.javascript.js +++ b/templates/webpack.javascript.js @@ -49,6 +49,10 @@ module.exports = env => { const entryModule = nsWebpack.getEntryModule(appFullPath); const entryPath = `.${sep}${entryModule}.js`; + const entries = { bundle: entryPath }; + if (platform === "ios") { + entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules.js"; + }; const config = { mode: uglify ? "production" : "development", @@ -62,9 +66,7 @@ module.exports = env => { ] }, target: nativescriptTarget, - entry: { - bundle: entryPath, - }, + entry: entries, output: { pathinfo: false, path: dist, diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js index 913977c9..a6128706 100644 --- a/templates/webpack.typescript.js +++ b/templates/webpack.typescript.js @@ -49,6 +49,10 @@ module.exports = env => { const entryModule = nsWebpack.getEntryModule(appFullPath); const entryPath = `.${sep}${entryModule}.ts`; + const entries = { bundle: entryPath }; + if (platform === "ios") { + entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules.js"; + }; const config = { mode: uglify ? "production" : "development", @@ -62,9 +66,7 @@ module.exports = env => { ] }, target: nativescriptTarget, - entry: { - bundle: entryPath, - }, + entry: entries, output: { pathinfo: false, path: dist, diff --git a/templates/webpack.vue.js b/templates/webpack.vue.js index 18a09ff3..45a3eecb 100644 --- a/templates/webpack.vue.js +++ b/templates/webpack.vue.js @@ -55,6 +55,10 @@ module.exports = env => { const entryModule = nsWebpack.getEntryModule(appFullPath); const entryPath = `.${sep}${entryModule}`; + const entries = { bundle: entryPath }; + if (platform === "ios") { + entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules.js"; + }; console.log(`Bundling application for entryPath ${entryPath}...`); const config = { @@ -70,9 +74,7 @@ module.exports = env => { }, target: nativescriptTarget, // target: nativeScriptVueTarget, - entry: { - bundle: entryPath, - }, + entry: entries, output: { pathinfo: false, path: dist, From 6e780af5e4000f0e96571bc9514ccf54abebd8c2 Mon Sep 17 00:00:00 2001 From: Martin Bektchiev Date: Thu, 14 Feb 2019 12:48:29 +0200 Subject: [PATCH 2/2] fix(inspector_modules): Switch to `single` runtime chunk The default setting causes the WebPack runtime to be loaded twice because the `inspector_modules` module is loaded by the iOS runtime as a secondary entry point. This has some undesirable implications as [stated in the documentation](https://webpack.js.org/configuration/optimization/#optimizationruntimechunk): > Imported modules are initialized for each runtime chunk separately, > so if you include multiple entry points on a page, beware of this > behavior. You will probably want to set it to single or use another > configuration that allows you to only have one runtime instance. --- templates/webpack.angular.js | 15 +++++++++++---- templates/webpack.javascript.js | 17 ++++++++++++----- templates/webpack.typescript.js | 17 ++++++++++++----- templates/webpack.vue.js | 15 +++++++++++---- 4 files changed, 46 insertions(+), 18 deletions(-) diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js index 058a5619..f5a97343 100644 --- a/templates/webpack.angular.js +++ b/templates/webpack.angular.js @@ -140,6 +140,7 @@ module.exports = env => { }, devtool: sourceMap ? "inline-source-map" : "none", optimization: { + runtimeChunk: "single", splitChunks: { cacheGroups: { vendor: { @@ -257,10 +258,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(), diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js index 793bba54..b2b6d3fa 100644 --- a/templates/webpack.javascript.js +++ b/templates/webpack.javascript.js @@ -100,7 +100,8 @@ module.exports = env => { "__dirname": false, }, devtool: sourceMap ? "inline-source-map" : "none", - optimization: { + optimization: { + runtimeChunk: "single", splitChunks: { cacheGroups: { vendor: { @@ -209,10 +210,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(), diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js index a6128706..8f970251 100644 --- a/templates/webpack.typescript.js +++ b/templates/webpack.typescript.js @@ -102,7 +102,8 @@ module.exports = env => { "__dirname": false, }, devtool: sourceMap ? "inline-source-map" : "none", - optimization: { + optimization: { + runtimeChunk: "single", splitChunks: { cacheGroups: { vendor: { @@ -222,10 +223,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(), diff --git a/templates/webpack.vue.js b/templates/webpack.vue.js index 45a3eecb..def82f1a 100644 --- a/templates/webpack.vue.js +++ b/templates/webpack.vue.js @@ -113,6 +113,7 @@ module.exports = env => { }, devtool: "none", optimization: { + runtimeChunk: "single", splitChunks: { cacheGroups: { vendor: { @@ -229,10 +230,16 @@ module.exports = env => { { from: { glob: "assets/**/*" } }, ], { 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(),