Skip to content

Commit 57ed108

Browse files
tsonevntsonevn
committed
fixing example local html file in WebView (webpack)
1 parent 0f2f654 commit 57ed108

File tree

3 files changed

+271
-3
lines changed

3 files changed

+271
-3
lines changed

‎.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,5 @@ app/**/*.js
1313
**/*.log
1414
tags
1515

16-
webpack.config.js
1716
tsconfig.esm.json
1817

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# NativeScript Code Samples
22

3-
This repo contains the code of the [NativeScript Code Samples](http://docs.nativescript.org/angular/code-samples/overview.html) companion application.
3+
This repo contains the code of the [NativeScript Code Samples](http://docs.nativescript.org/angular/ui/components/) companion application.
44

5-
You can get the source code of the application and start exploring the code there, or you can [read the documentation articles](http://docs.nativescript.org/angular/code-samples/overview.html) associated with each of the examples. The application is also very useful as a NativeScript playground - you can use the source code as a starting point and modify them to fit your app needs.
5+
You can get the source code of the application and start exploring the code there, or you can [read the documentation articles](http://docs.nativescript.org/angular/ui/components/) associated with each of the examples. The application is also very useful as a NativeScript playground - you can use the source code as a starting point and modify them to fit your app needs.
66

77
It is very easy to contribute to the samples and we encourage you to contribute any samples you think that will be useful for other developers. If you need a sample that is missing, please [open a new issue](https://github.com/NativeScript/nativescript-sdk-examples-ng/issues) so that other member of the community can help you.
88

‎webpack.config.js

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

0 commit comments

Comments
 (0)