@nativescript/webpack 3.1.0-hmr.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/helpers/angular-config-parser.js +31 -24
  2. package/host/resolver.js +0 -9
  3. package/host/resolver.js.map +1 -1
  4. package/package.json +1 -1
  5. package/templates/webpack.angular.js +335 -413
  6. package/templates/webpack.javascript.js +263 -267
  7. package/templates/webpack.react.js +73 -74
  8. package/templates/webpack.svelte.js +131 -137
  9. package/templates/webpack.typescript.js +299 -305
  10. package/templates/webpack.vue.js +326 -337
package/templates/webpack.javascript.js CHANGED
@@ -1,297 +1,293 @@
1
- const { join, relative, resolve, sep } = require("path");
1
+ const { join, relative, resolve, sep } = require('path');
2
2
  const fs = require('fs');
3
3
 
4
- const webpack = require("webpack");
5
- const nsWebpack = require("@nativescript/webpack");
6
- const nativescriptTarget = require("@nativescript/webpack/nativescript-target");
7
- const { CleanWebpackPlugin } = require("clean-webpack-plugin");
8
- const CopyWebpackPlugin = require("copy-webpack-plugin");
9
- const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
10
- const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
11
- const TerserPlugin = require("terser-webpack-plugin");
4
+ const webpack = require('webpack');
5
+ const nsWebpack = require('@nativescript/webpack');
6
+ const nativescriptTarget = require('@nativescript/webpack/nativescript-target');
7
+ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
8
+ const CopyWebpackPlugin = require('copy-webpack-plugin');
9
+ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
10
+ const { NativeScriptWorkerPlugin } = require('nativescript-worker-loader/NativeScriptWorkerPlugin');
11
+ const TerserPlugin = require('terser-webpack-plugin');
12
12
  const hashSalt = Date.now().toString();
13
13
 
14
- module.exports = env => {
15
- // Add your custom Activities, Services and other android app components here.
16
- const appComponents = env.appComponents || [];
17
- appComponents.push(...[
18
- "@nativescript/core/ui/frame",
19
- "@nativescript/core/ui/frame/activity",
20
- ]);
14
+ module.exports = (env) => {
15
+ const platform = env && ((env.android && 'android') || (env.ios && 'ios') || env.platform);
16
+ if (!platform) {
17
+ throw new Error('You need to provide a target platform!');
18
+ }
21
19
 
22
- const platform = env && (env.android && "android" || env.ios && "ios" || env.platform);
23
- if (!platform) {
24
- throw new Error("You need to provide a target platform!");
25
- }
20
+ const platforms = ['ios', 'android'];
21
+ const projectRoot = __dirname;
26
22
 
27
- const platforms = ["ios", "android"];
28
- const projectRoot = __dirname;
23
+ if (env.platform) {
24
+ platforms.push(env.platform);
25
+ }
29
26
 
30
- if (env.platform) {
31
- platforms.push(env.platform);
32
- }
27
+ // Default destination inside platforms/<platform>/...
28
+ const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
33
29
 
34
- // Default destination inside platforms/<platform>/...
35
- const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
30
+ const {
31
+ // The 'appPath' and 'appResourcesPath' values are fetched from
32
+ // the nsconfig.json configuration file.
33
+ appPath = 'src',
34
+ appResourcesPath = 'App_Resources',
36
35
 
37
- const {
38
- // The 'appPath' and 'appResourcesPath' values are fetched from
39
- // the nsconfig.json configuration file.
40
- appPath = "src",
41
- appResourcesPath = "App_Resources",
36
+ // You can provide the following flags when running 'tns run android|ios'
37
+ snapshot, // --env.snapshot
38
+ production, // --env.production
39
+ uglify, // --env.uglify
40
+ report, // --env.report
41
+ sourceMap, // --env.sourceMap
42
+ hiddenSourceMap, // --env.hiddenSourceMap
43
+ hmr, // --env.hmr,
44
+ unitTesting, // --env.unitTesting,
45
+ testing, // --env.testing
46
+ verbose, // --env.verbose
47
+ snapshotInDocker, // --env.snapshotInDocker
48
+ skipSnapshotTools, // --env.skipSnapshotTools
49
+ ci, // --env.ci
50
+ compileSnapshot, // --env.compileSnapshot
51
+ appComponents = [],
52
+ entries = {},
53
+ } = env;
42
54
 
43
- // You can provide the following flags when running 'tns run android|ios'
44
- snapshot, // --env.snapshot
45
- production, // --env.production
46
- uglify, // --env.uglify
47
- report, // --env.report
48
- sourceMap, // --env.sourceMap
49
- hiddenSourceMap, // --env.hiddenSourceMap
50
- hmr, // --env.hmr,
51
- unitTesting, // --env.unitTesting,
52
- testing, // --env.testing
53
- verbose, // --env.verbose
54
- snapshotInDocker, // --env.snapshotInDocker
55
- skipSnapshotTools, // --env.skipSnapshotTools
56
- compileSnapshot // --env.compileSnapshot
57
- } = env;
55
+ const useLibs = compileSnapshot;
56
+ const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
57
+ const externals = nsWebpack.getConvertedExternals(env.externals);
58
58
 
59
- const useLibs = compileSnapshot;
60
- const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
61
- const externals = nsWebpack.getConvertedExternals(env.externals);
62
- let appFullPath = resolve(projectRoot, appPath);
63
- if (!fs.existsSync(appFullPath)) {
64
- // some apps use 'app' directory
65
- appFullPath = resolve(projectRoot, 'app');
66
- }
67
- const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
68
- let coreModulesPackageName = "tns-core-modules";
69
- const alias = env.alias || {};
70
- alias['~/package.json'] = resolve(projectRoot, 'package.json');
71
- alias['~'] = appFullPath;
59
+ let appFullPath = resolve(projectRoot, appPath);
60
+ if (!fs.existsSync(appFullPath)) {
61
+ // some apps use 'app' directory
62
+ appFullPath = resolve(projectRoot, 'app');
63
+ }
64
+ const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
65
+ let coreModulesPackageName = 'tns-core-modules';
66
+ const alias = env.alias || {};
67
+ alias['~/package.json'] = resolve(projectRoot, 'package.json');
68
+ alias['~'] = appFullPath;
72
69
 
73
- if (hasRootLevelScopedModules) {
74
- coreModulesPackageName = "@nativescript/core";
75
- alias["tns-core-modules"] = coreModulesPackageName;
76
- }
77
- const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
70
+ if (hasRootLevelScopedModules) {
71
+ coreModulesPackageName = '@nativescript/core';
72
+ alias['tns-core-modules'] = coreModulesPackageName;
73
+ }
74
+ const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
78
75
 
79
- const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] };
76
+ const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] };
80
77
 
81
- const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
82
- const entryPath = `.${sep}${entryModule}.js`;
83
- const entries = env.entries || {};
84
- entries.bundle = entryPath;
78
+ const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
79
+ const entryPath = `.${sep}${entryModule}.js`;
80
+ Object.assign(entries, { bundle: entryPath }, entries);
85
81
 
86
- const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
87
- if (platform === "ios" && !areCoreModulesExternal && !testing) {
88
- entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
89
- };
82
+ const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some((e) => e.indexOf('@nativescript') > -1);
83
+ if (platform === 'ios' && !areCoreModulesExternal && !testing) {
84
+ entries['tns_modules/inspector_modules'] = '@nativescript/core/inspector_modules';
85
+ }
90
86
 
91
- let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
87
+ let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
92
88
 
93
- const itemsToClean = [`${dist}/**/*`];
94
- if (platform === "android") {
95
- itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
96
- itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
97
- }
89
+ const itemsToClean = [`${dist}/**/*`];
90
+ if (platform === 'android') {
91
+ itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'src', 'main', 'assets', 'snapshots')}`);
92
+ itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'build', 'configurations', 'nativescript-android-snapshot')}`);
93
+ }
98
94
 
95
+ // Add your custom Activities, Services and other android app components here.
96
+ appComponents.push('@nativescript/core/ui/frame', '@nativescript/core/ui/frame/activity');
99
97
 
100
- nsWebpack.processAppComponents(appComponents, platform);
101
- const config = {
102
- mode: production ? "production" : "development",
103
- context: appFullPath,
104
- externals,
105
- watchOptions: {
106
- ignored: [
107
- appResourcesFullPath,
108
- // Don't watch hidden files
109
- "**/.*",
110
- ]
111
- },
112
- target: nativescriptTarget,
113
- entry: entries,
114
- output: {
115
- pathinfo: false,
116
- path: dist,
117
- sourceMapFilename,
118
- libraryTarget: "commonjs2",
119
- filename: "[name].js",
120
- globalObject: "global",
121
- hashSalt
122
- },
123
- resolve: {
124
- extensions: [".js", ".scss", ".css"],
125
- // Resolve {N} system modules from @nativescript/core
126
- modules: [
127
- resolve(__dirname, `node_modules/${coreModulesPackageName}`),
128
- resolve(__dirname, "node_modules"),
129
- `node_modules/${coreModulesPackageName}`,
130
- "node_modules",
131
- ],
132
- alias,
133
- // resolve symlinks to symlinked modules
134
- symlinks: true
135
- },
136
- resolveLoader: {
137
- // don't resolve symlinks to symlinked loaders
138
- symlinks: false
139
- },
140
- node: {
141
- // Disable node shims that conflict with NativeScript
142
- "http": false,
143
- "timers": false,
144
- "setImmediate": false,
145
- "fs": "empty",
146
- "__dirname": false,
147
- },
148
- devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
149
- optimization: {
150
- runtimeChunk: "single",
151
- noEmitOnErrors: true,
152
- splitChunks: {
153
- cacheGroups: {
154
- vendor: {
155
- name: "vendor",
156
- chunks: "all",
157
- test: (module, chunks) => {
158
- const moduleName = module.nameForCondition ? module.nameForCondition() : '';
159
- return /[\\/]node_modules[\\/]/.test(moduleName) ||
160
- appComponents.some(comp => comp === moduleName);
98
+ nsWebpack.processAppComponents(appComponents, platform);
99
+ const config = {
100
+ mode: production ? 'production' : 'development',
101
+ context: appFullPath,
102
+ externals,
103
+ watchOptions: {
104
+ ignored: [
105
+ appResourcesFullPath,
106
+ // Don't watch hidden files
107
+ '**/.*',
108
+ ],
109
+ },
110
+ target: nativescriptTarget,
111
+ entry: entries,
112
+ output: {
113
+ pathinfo: false,
114
+ path: dist,
115
+ sourceMapFilename,
116
+ libraryTarget: 'commonjs2',
117
+ filename: '[name].js',
118
+ globalObject: 'global',
119
+ hashSalt,
120
+ },
121
+ resolve: {
122
+ extensions: ['.js', '.scss', '.css'],
123
+ // Resolve {N} system modules from @nativescript/core
124
+ modules: [resolve(__dirname, `node_modules/${coreModulesPackageName}`), resolve(__dirname, 'node_modules'), `node_modules/${coreModulesPackageName}`, 'node_modules'],
125
+ alias,
126
+ // resolve symlinks to symlinked modules
127
+ symlinks: true,
128
+ },
129
+ resolveLoader: {
130
+ // don't resolve symlinks to symlinked loaders
131
+ symlinks: false,
132
+ },
133
+ node: {
134
+ // Disable node shims that conflict with NativeScript
135
+ http: false,
136
+ timers: false,
137
+ setImmediate: false,
138
+ fs: 'empty',
139
+ __dirname: false,
140
+ },
141
+ devtool: hiddenSourceMap ? 'hidden-source-map' : sourceMap ? 'inline-source-map' : 'none',
142
+ optimization: {
143
+ runtimeChunk: 'single',
144
+ noEmitOnErrors: true,
145
+ splitChunks: {
146
+ cacheGroups: {
147
+ vendor: {
148
+ name: 'vendor',
149
+ chunks: 'all',
150
+ test: (module, chunks) => {
151
+ const moduleName = module.nameForCondition ? module.nameForCondition() : '';
152
+ return /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some((comp) => comp === moduleName);
153
+ },
154
+ enforce: true,
155
+ },
156
+ },
157
+ },
158
+ minimize: !!uglify,
159
+ minimizer: [
160
+ new TerserPlugin({
161
+ parallel: true,
162
+ cache: !ci,
163
+ sourceMap: isAnySourceMapEnabled,
164
+ terserOptions: {
165
+ output: {
166
+ comments: false,
167
+ semicolons: !isAnySourceMapEnabled,
168
+ },
169
+ compress: {
170
+ // The Android SBG has problems parsing the output
171
+ // when these options are enabled
172
+ collapse_vars: platform !== 'android',
173
+ sequences: platform !== 'android',
174
+ // For v8 Compatibility
175
+ keep_infinity: true, // for V8
176
+ reduce_funcs: false, // for V8
177
+ // custom
178
+ drop_console: production,
179
+ drop_debugger: true,
180
+ global_defs: {
181
+ __UGLIFIED__: true,
182
+ },
183
+ },
184
+ // Required for Element Level CSS, Observable Events, & Android Frame
185
+ keep_classnames: true,
186
+ },
187
+ }),
188
+ ],
189
+ },
190
+ module: {
191
+ rules: [
192
+ {
193
+ include: join(appFullPath, entryPath),
194
+ use: [
195
+ // Require all Android app components
196
+ platform === 'android' && {
197
+ loader: '@nativescript/webpack/helpers/android-app-components-loader',
198
+ options: { modules: appComponents },
199
+ },
161
200
 
162
- },
163
- enforce: true,
164
- },
165
- }
166
- },
167
- minimize: !!uglify,
168
- minimizer: [
169
- new TerserPlugin({
170
- parallel: true,
171
- cache: true,
172
- sourceMap: isAnySourceMapEnabled,
173
- terserOptions: {
174
- output: {
175
- comments: false,
176
- semicolons: !isAnySourceMapEnabled
177
- },
178
- compress: {
179
- // The Android SBG has problems parsing the output
180
- // when these options are enabled
181
- 'collapse_vars': platform !== "android",
182
- sequences: platform !== "android",
183
- }
184
- }
185
- })
186
- ],
187
- },
188
- module: {
189
- rules: [
190
- {
191
- include: join(appFullPath, entryPath),
192
- use: [
193
- // Require all Android app components
194
- platform === "android" && {
195
- loader: "@nativescript/webpack/helpers/android-app-components-loader",
196
- options: { modules: appComponents }
197
- },
201
+ {
202
+ loader: '@nativescript/webpack/bundle-config-loader',
203
+ options: {
204
+ loadCss: !snapshot, // load the application css if in debug mode
205
+ unitTesting,
206
+ appFullPath,
207
+ projectRoot,
208
+ ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform),
209
+ },
210
+ },
211
+ ].filter((loader) => !!loader),
212
+ },
198
213
 
199
- {
200
- loader: "@nativescript/webpack/bundle-config-loader",
201
- options: {
202
- loadCss: !snapshot, // load the application css if in debug mode
203
- unitTesting,
204
- appFullPath,
205
- projectRoot,
206
- ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
207
- }
208
- },
209
- ].filter(loader => !!loader)
210
- },
214
+ {
215
+ test: /\.(js|css|scss|html|xml)$/,
216
+ use: '@nativescript/webpack/hmr/hot-loader',
217
+ },
211
218
 
212
- {
213
- test: /\.(js|css|scss|html|xml)$/,
214
- use: "@nativescript/webpack/hmr/hot-loader"
215
- },
219
+ { test: /\.(html|xml)$/, use: '@nativescript/webpack/helpers/xml-namespace-loader' },
216
220
 
217
- { test: /\.(html|xml)$/, use: "@nativescript/webpack/helpers/xml-namespace-loader" },
221
+ {
222
+ test: /\.css$/,
223
+ use: '@nativescript/webpack/helpers/css2json-loader',
224
+ },
218
225
 
219
- {
220
- test: /\.css$/,
221
- use: "@nativescript/webpack/helpers/css2json-loader"
222
- },
226
+ {
227
+ test: /\.scss$/,
228
+ use: ['@nativescript/webpack/helpers/css2json-loader', 'sass-loader'],
229
+ },
230
+ ],
231
+ },
232
+ plugins: [
233
+ // Define useful constants like TNS_WEBPACK
234
+ new webpack.DefinePlugin({
235
+ 'global.TNS_WEBPACK': 'true',
236
+ 'global.isAndroid': platform === 'android',
237
+ 'global.isIOS': platform === 'ios',
238
+ process: 'global.process',
239
+ }),
240
+ // Remove all files from the out dir.
241
+ new CleanWebpackPlugin({
242
+ cleanOnceBeforeBuildPatterns: itemsToClean,
243
+ verbose: !!verbose,
244
+ }),
245
+ // Copy assets
246
+ new CopyWebpackPlugin([{ from: { glob: 'assets/**', dot: false } }, { from: { glob: 'fonts/**', dot: false } }, { from: { glob: '**/*.jpg', dot: false } }, { from: { glob: '**/*.png', dot: false } }], copyIgnore),
247
+ new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'),
223
248
 
224
- {
225
- test: /\.scss$/,
226
- use: [
227
- "@nativescript/webpack/helpers/css2json-loader",
228
- "sass-loader"
229
- ]
230
- },
231
- ]
232
- },
233
- plugins: [
234
- // Define useful constants like TNS_WEBPACK
235
- new webpack.DefinePlugin({
236
- "global.TNS_WEBPACK": "true",
237
- "global.isAndroid": platform === 'android',
238
- "global.isIOS": platform === 'ios',
239
- "process": "global.process",
240
- }),
241
- // Remove all files from the out dir.
242
- new CleanWebpackPlugin({
243
- cleanOnceBeforeBuildPatterns: itemsToClean,
244
- verbose: !!verbose
245
- }),
246
- // Copy assets
247
- new CopyWebpackPlugin([
248
- { from: { glob: 'assets/**', dot: false } },
249
- { from: { glob: 'fonts/**', dot: false } },
250
- { from: { glob: '**/*.jpg', dot: false } },
251
- { from: { glob: '**/*.png', dot: false } },
252
- ], copyIgnore),
253
- new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
249
+ // For instructions on how to set up workers with webpack
250
+ // check out https://github.com/nativescript/worker-loader
251
+ new NativeScriptWorkerPlugin(),
252
+ new nsWebpack.PlatformFSPlugin({
253
+ platform,
254
+ platforms,
255
+ }),
256
+ // Does IPC communication with the {N} CLI to notify events when running in watch mode.
257
+ new nsWebpack.WatchStateLoggerPlugin(),
258
+ ],
259
+ };
254
260
 
255
- // For instructions on how to set up workers with webpack
256
- // check out https://github.com/nativescript/worker-loader
257
- new NativeScriptWorkerPlugin(),
258
- new nsWebpack.PlatformFSPlugin({
259
- platform,
260
- platforms,
261
- }),
262
- // Does IPC communication with the {N} CLI to notify events when running in watch mode.
263
- new nsWebpack.WatchStateLoggerPlugin()
264
- ],
265
- };
261
+ if (report) {
262
+ // Generate report files for bundles content
263
+ config.plugins.push(
264
+ new BundleAnalyzerPlugin({
265
+ analyzerMode: 'static',
266
+ openAnalyzer: false,
267
+ generateStatsFile: true,
268
+ reportFilename: resolve(projectRoot, 'report', `report.html`),
269
+ statsFilename: resolve(projectRoot, 'report', `stats.json`),
270
+ })
271
+ );
272
+ }
266
273
 
267
- if (report) {
268
- // Generate report files for bundles content
269
- config.plugins.push(new BundleAnalyzerPlugin({
270
- analyzerMode: "static",
271
- openAnalyzer: false,
272
- generateStatsFile: true,
273
- reportFilename: resolve(projectRoot, "report", `report.html`),
274
- statsFilename: resolve(projectRoot, "report", `stats.json`),
275
- }));
276
- }
274
+ if (snapshot) {
275
+ config.plugins.push(
276
+ new nsWebpack.NativeScriptSnapshotPlugin({
277
+ chunk: 'vendor',
278
+ requireModules: ['@nativescript/core/bundle-entry-points'],
279
+ projectRoot,
280
+ webpackConfig: config,
281
+ snapshotInDocker,
282
+ skipSnapshotTools,
283
+ useLibs,
284
+ })
285
+ );
286
+ }
277
287
 
278
- if (snapshot) {
279
- config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
280
- chunk: "vendor",
281
- requireModules: [
282
- "@nativescript/core/bundle-entry-points",
283
- ],
284
- projectRoot,
285
- webpackConfig: config,
286
- snapshotInDocker,
287
- skipSnapshotTools,
288
- useLibs
289
- }));
290
- }
288
+ if (hmr) {
289
+ config.plugins.push(new webpack.HotModuleReplacementPlugin());
290
+ }
291
291
 
292
- if (hmr) {
293
- config.plugins.push(new webpack.HotModuleReplacementPlugin());
294
- }
295
-
296
- return config;
292
+ return config;
297
293
  };