Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

Commit 06a163e

Browse files
vchimevvchimev
committed
chore(JavaScriptApp): add webpack.config.js file
Clean up npm scripts.
1 parent 2996182 commit 06a163e

File tree

3 files changed

+229
-9
lines changed

3 files changed

+229
-9
lines changed

Diff for: ‎demo/.gitignore

-2
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,3 @@ tsconfig.aot.json
1515

1616
vendor.js
1717
vendor.ts
18-
19-
webpack.config.js

Diff for: ‎demo/JavaScriptApp/package.json

-7
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,6 @@
3333
"node-sass": "^4.7.1"
3434
},
3535
"scripts": {
36-
"ns-bundle": "ns-bundle",
37-
"start-android-bundle": "npm run ns-bundle --android --run-app",
38-
"start-ios-bundle": "npm run ns-bundle --ios --run-app",
39-
"build-android-bundle": "npm run ns-bundle --android --build-app",
40-
"build-ios-bundle": "npm run ns-bundle --ios --build-app",
41-
"publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
42-
"generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
4336
"e2e": "mocha --opts ../config/mocha.opts --recursive e2e --appiumCapsLocation ../config/appium.capabilities.json"
4437
}
4538
}

Diff for: ‎demo/JavaScriptApp/webpack.config.js

+229
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
const { join, relative, resolve, sep } = require("path");
2+
3+
const webpack = require("webpack");
4+
const nsWebpack = require("nativescript-dev-webpack");
5+
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
6+
const CleanWebpackPlugin = require("clean-webpack-plugin");
7+
const CopyWebpackPlugin = require("copy-webpack-plugin");
8+
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
9+
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
10+
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
11+
12+
module.exports = env => {
13+
// Add your custom Activities, Services and other android app components here.
14+
const appComponents = [
15+
"tns-core-modules/ui/frame",
16+
"tns-core-modules/ui/frame/activity",
17+
];
18+
19+
const platform = env && (env.android && "android" || env.ios && "ios");
20+
if (!platform) {
21+
throw new Error("You need to provide a target platform!");
22+
}
23+
24+
const platforms = ["ios", "android"];
25+
const projectRoot = __dirname;
26+
27+
// Default destination inside platforms/<platform>/...
28+
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
29+
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
30+
31+
const {
32+
// The 'appPath' and 'appResourcesPath' values are fetched from
33+
// the nsconfig.json configuration file
34+
// when bundling with `tns run android|ios --bundle`.
35+
appPath = "app",
36+
appResourcesPath = "app/App_Resources",
37+
38+
// You can provide the following flags when running 'tns run android|ios'
39+
snapshot, // --env.snapshot
40+
uglify, // --env.uglify
41+
report, // --env.report
42+
} = env;
43+
44+
const appFullPath = resolve(projectRoot, appPath);
45+
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
46+
47+
const entryModule = nsWebpack.getEntryModule(appFullPath);
48+
const entryPath = `.${sep}${entryModule}.js`;
49+
50+
const config = {
51+
mode: uglify ? "production" : "development",
52+
context: appFullPath,
53+
watchOptions: {
54+
ignored: [
55+
appResourcesFullPath,
56+
// Don't watch hidden files
57+
"**/.*",
58+
]
59+
},
60+
target: nativescriptTarget,
61+
entry: {
62+
bundle: entryPath,
63+
},
64+
output: {
65+
pathinfo: false,
66+
path: dist,
67+
libraryTarget: "commonjs2",
68+
filename: "[name].js",
69+
globalObject: "global",
70+
},
71+
resolve: {
72+
extensions: [".js", ".scss", ".css"],
73+
// Resolve {N} system modules from tns-core-modules
74+
modules: [
75+
"node_modules/tns-core-modules",
76+
"node_modules",
77+
],
78+
alias: {
79+
'~': appFullPath
80+
},
81+
// don't resolve symlinks to symlinked modules
82+
symlinks: false
83+
},
84+
resolveLoader: {
85+
// don't resolve symlinks to symlinked loaders
86+
symlinks: false
87+
},
88+
node: {
89+
// Disable node shims that conflict with NativeScript
90+
"http": false,
91+
"timers": false,
92+
"setImmediate": false,
93+
"fs": "empty",
94+
"__dirname": false,
95+
},
96+
devtool: "none",
97+
optimization: {
98+
splitChunks: {
99+
cacheGroups: {
100+
vendor: {
101+
name: "vendor",
102+
chunks: "all",
103+
test: (module, chunks) => {
104+
const moduleName = module.nameForCondition ? module.nameForCondition() : '';
105+
return /[\\/]node_modules[\\/]/.test(moduleName) ||
106+
appComponents.some(comp => comp === moduleName);
107+
108+
},
109+
enforce: true,
110+
},
111+
}
112+
},
113+
minimize: !!uglify,
114+
minimizer: [
115+
new UglifyJsPlugin({
116+
uglifyOptions: {
117+
parallel: true,
118+
cache: true,
119+
output: {
120+
comments: false,
121+
},
122+
compress: {
123+
// The Android SBG has problems parsing the output
124+
// when these options are enabled
125+
'collapse_vars': platform !== "android",
126+
sequences: platform !== "android",
127+
}
128+
}
129+
})
130+
],
131+
},
132+
module: {
133+
rules: [
134+
{
135+
test: new RegExp(entryPath),
136+
use: [
137+
// Require all Android app components
138+
platform === "android" && {
139+
loader: "nativescript-dev-webpack/android-app-components-loader",
140+
options: { modules: appComponents }
141+
},
142+
143+
{
144+
loader: "nativescript-dev-webpack/bundle-config-loader",
145+
options: {
146+
loadCss: !snapshot, // load the application css if in debug mode
147+
}
148+
},
149+
].filter(loader => !!loader)
150+
},
151+
152+
{ test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader"},
153+
154+
{
155+
test: /\.css$/,
156+
use: { loader: "css-loader", options: { minimize: false, url: false } }
157+
},
158+
159+
{
160+
test: /\.scss$/,
161+
use: [
162+
{ loader: "css-loader", options: { minimize: false, url: false } },
163+
"sass-loader"
164+
]
165+
}
166+
]
167+
},
168+
plugins: [
169+
// Define useful constants like TNS_WEBPACK
170+
new webpack.DefinePlugin({
171+
"global.TNS_WEBPACK": "true",
172+
}),
173+
// Remove all files from the out dir.
174+
new CleanWebpackPlugin([ `${dist}/**/*` ]),
175+
// Copy native app resources to out dir.
176+
new CopyWebpackPlugin([
177+
{
178+
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
179+
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
180+
context: projectRoot
181+
},
182+
]),
183+
// Copy assets to out dir. Add your own globs as needed.
184+
new CopyWebpackPlugin([
185+
{ from: "fonts/**" },
186+
{ from: "**/*.jpg" },
187+
{ from: "**/*.png" },
188+
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
189+
// Generate a bundle starter script and activate it in package.json
190+
new nsWebpack.GenerateBundleStarterPlugin([
191+
"./vendor",
192+
"./bundle",
193+
]),
194+
// For instructions on how to set up workers with webpack
195+
// check out https://github.com/nativescript/worker-loader
196+
new NativeScriptWorkerPlugin(),
197+
new nsWebpack.PlatformFSPlugin({
198+
platform,
199+
platforms,
200+
}),
201+
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
202+
new nsWebpack.WatchStateLoggerPlugin(),
203+
],
204+
};
205+
206+
if (report) {
207+
// Generate report files for bundles content
208+
config.plugins.push(new BundleAnalyzerPlugin({
209+
analyzerMode: "static",
210+
openAnalyzer: false,
211+
generateStatsFile: true,
212+
reportFilename: resolve(projectRoot, "report", `report.html`),
213+
statsFilename: resolve(projectRoot, "report", `stats.json`),
214+
}));
215+
}
216+
217+
if (snapshot) {
218+
config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
219+
chunk: "vendor",
220+
requireModules: [
221+
"tns-core-modules/bundle-entry-points",
222+
],
223+
projectRoot,
224+
webpackConfig: config,
225+
}));
226+
}
227+
228+
return config;
229+
};

0 commit comments

Comments
 (0)