Skip to content

Instantly share code, notes, and snippets.

@ray007
Last active June 30, 2020 12:43
Show Gist options
  • Save ray007/9303feab03b3ce60979e41a6b3fa9286 to your computer and use it in GitHub Desktop.
Save ray007/9303feab03b3ce60979e41a6b3fa9286 to your computer and use it in GitHub Desktop.
webpack bundle / binary corruption problem
Preparing project...
Bundling application for entryPath .\app...
Hash: 21815df5bf54b41e1265
Version: webpack 4.27.1
Time: 30055ms
Built at: 2020-06-30 14:30:53
Asset Size Chunks Chunk Names
assets/splash.gif 17.9 KiB [emitted]
bundle.js 7.21 MiB bundle [emitted] bundle
fonts/MaterialIcons-Regular.ttf 125 KiB [emitted]
fonts/fa-brands-400.ttf 131 KiB [emitted]
fonts/fa-regular-400.ttf 39.1 KiB [emitted]
fonts/fa-solid-900.ttf 204 KiB [emitted]
webassets/css/lweb.ico 2.43 KiB [emitted]
webassets/css/lweb.svg 6.09 KiB [emitted]
webassets/css/lweb_114.png 12.5 KiB [emitted]
webassets/img/lweb900_views.svg 80 KiB [emitted]
webassets/img/splash.gif 31.7 KiB [emitted]
webassets/index.html 2.26 KiB [emitted]
webassets/lib/basket.js 9.9 KiB [emitted]
webassets/lib/loader.js 1.94 KiB [emitted]
webassets/lib/m/MaterialIcons-Regular.ttf 147 KiB [emitted]
webassets/lib/m/material-icons.css 987 bytes [emitted]
webassets/lib/m/materialize.css 139 KiB [emitted]
webassets/webapp.appcache 924 bytes [emitted]
webassets/webapp.js 636 KiB [emitted]
webassets/lweblibs.js 393 KiB [emitted]
webassets/lwebstyles.css 161 KiB [emitted]
webassets/msgs.json 47.8 KiB [emitted]
webassets/sw-webapp.js 10.4 KiB [emitted]
package.json 112 bytes [emitted]
runtime.js 13.9 KiB runtime [emitted] runtime
tns-java-classes.js 0 bytes [emitted]
vendor.js 14.6 MiB vendor [emitted] vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[./ sync ^\.\/app\.(css|scss|less|sass)$] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 175 bytes {bundle} [built]
[./ sync recursive (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$] . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$ 534 bytes {bundle} [built]
[./app.js] 1.84 KiB {bundle} [built]
[./app.scss] 120 KiB {bundle} [optional] [built]
[./lib/certs.js] 2.8 KiB {bundle} [built]
[./lib/loytecBT.js] 4.82 KiB {bundle} [built]
[./lib/lwebCfg.js] 3.72 KiB {bundle} [built]
[./lib/lwebUrl.js] 2.05 KiB {bundle} [built]
[./lib/tnsSrvConn.js] 9.15 KiB {bundle} [built]
[./webassets/lib/basket.js] 13.9 KiB {bundle} [optional] [built]
[./webassets/lib/loader.js] 2.08 KiB {bundle} [optional] [built]
[./webassets/lib/m/material-icons.css] 1.77 KiB {bundle} [optional] [built]
[./webassets/lib/m/materialize.css] 140 KiB {bundle} [optional] [built]
[./webassets/webapp.js] 638 KiB {bundle} [optional] [built]
[./webassets/applibs.js] 540 KiB {bundle} [optional] [built]
+ 530 hidden modules
Webpack compilation complete.
Project successfully prepared (android)
Building project...
Gradle build...
+ setting applicationId
+ applying user-defined configuration from C:\rtc-sandbox\ws_rb_lweb\lweb\src\lweb_804\tnsLWeb804\app\App_Resources\Android\app.gradle
+ using android X library androidx.legacy:legacy-support-v4:1.0.0
+ adding nativescript runtime package dependency: nativescript-optimized-with-inspector
+ adding aar plugin dependency: C:\rtc-sandbox\ws_rb_lweb\lweb\src\lweb_804\tnsLWeb804\node_modules\@nota\nativescript-webview-ext\platforms\android\nativescript_webview_ext.aar
+ adding aar plugin dependency: C:\rtc-sandbox\ws_rb_lweb\lweb\src\lweb_804\tnsLWeb804\node_modules\@nota\nativescript-webview-ext\platforms\android\webviewinterface.aar
+ adding aar plugin dependency: C:\rtc-sandbox\ws_rb_lweb\lweb\src\lweb_804\tnsLWeb804\node_modules\nativescript-bluetooth\platforms\android\nativescript_bluetooth.aar
+ adding aar plugin dependency: C:\rtc-sandbox\ws_rb_lweb\lweb\src\lweb_804\tnsLWeb804\node_modules\nativescript-inappbrowser\platforms\android\nativescript_inappbrowser.aar
+ adding aar plugin dependency: C:\rtc-sandbox\ws_rb_lweb\lweb\src\lweb_804\tnsLWeb804\node_modules\tns-core-modules-widgets\platforms\android\widgets-release.aar
Project successfully built.
The build result is located at: C:\devel\path\to\tnsApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk
const webpackConfig = require("./webpack.config");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { findConfigFile } = require("typescript");
module.exports = (env) => {
// Here you can modify env before passing them to the default config
const config = webpackConfig(env);
const copyWebApp = new CopyWebpackPlugin([
{ from: { glob: "webassets/**/*" } },
]);
config.plugins.push(copyWebApp);
return config;
}
const { join, relative, resolve, sep } = require("path");
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const TerserPlugin = require("terser-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
const hashSalt = Date.now().toString();
module.exports = env => {
// Add your custom Activities, Services and other android app components here.
const appComponents = env.appComponents || [];
appComponents.push(...[
"tns-core-modules/ui/frame",
"tns-core-modules/ui/frame/activity",
]);
const platform = env && (env.android && "android" || env.ios && "ios" || env.platform);
if (!platform) {
throw new Error("You need to provide a target platform!");
}
const platforms = ["ios", "android"];
const projectRoot = __dirname;
if (env.platform) {
platforms.push(env.platform);
}
// Default destination inside platforms/<platform>/...
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
const {
// The 'appPath' and 'appResourcesPath' values are fetched from
// the nsconfig.json configuration file.
appPath = "app",
appResourcesPath = "app/App_Resources",
// You can provide the following flags when running 'tns run android|ios'
snapshot, // --env.snapshot
production, // --env.production
report, // --env.report
hmr, // --env.hmr
sourceMap, // --env.sourceMap
hiddenSourceMap, // --env.hiddenSourceMap
unitTesting, // --env.unitTesting
verbose, // --env.verbose
snapshotInDocker, // --env.snapshotInDocker
skipSnapshotTools, // --env.skipSnapshotTools
compileSnapshot // --env.compileSnapshot
} = env;
const useLibs = compileSnapshot;
const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
const externals = nsWebpack.getConvertedExternals(env.externals);
const mode = production ? "production" : "development"
const appFullPath = resolve(projectRoot, appPath);
const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
let coreModulesPackageName = "tns-core-modules";
const alias = env.alias || {};
alias['~'] = appFullPath;
alias['@'] = appFullPath;
alias['vue'] = 'nativescript-vue';
if (hasRootLevelScopedModules) {
coreModulesPackageName = "@nativescript/core";
alias["tns-core-modules"] = coreModulesPackageName;
}
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
const entryPath = `.${sep}${entryModule}`;
const entries = env.entries || {};
entries.bundle = entryPath;
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
if (platform === "ios" && !areCoreModulesExternal) {
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
};
console.log(`Bundling application for entryPath ${entryPath}...`);
let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
const itemsToClean = [`${dist}/**/*`];
if (platform === "android") {
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
}
nsWebpack.processAppComponents(appComponents, platform);
const config = {
mode: mode,
context: appFullPath,
externals,
watchOptions: {
ignored: [
appResourcesFullPath,
// Don't watch hidden files
"**/.*",
],
},
target: nativescriptTarget,
// target: nativeScriptVueTarget,
entry: entries,
output: {
pathinfo: false,
path: dist,
sourceMapFilename,
libraryTarget: "commonjs2",
filename: "[name].js",
globalObject: "global",
hashSalt
},
resolve: {
extensions: [".vue", ".ts", ".js", ".scss", ".css"],
// Resolve {N} system modules from tns-core-modules
modules: [
resolve(__dirname, `node_modules/${coreModulesPackageName}`),
resolve(__dirname, "node_modules"),
`node_modules/${coreModulesPackageName}`,
"node_modules",
],
alias,
// resolve symlinks to symlinked modules
symlinks: true,
},
resolveLoader: {
// don't resolve symlinks to symlinked loaders
symlinks: false,
},
node: {
// Disable node shims that conflict with NativeScript
"http": false,
"timers": false,
"setImmediate": false,
"fs": "empty",
"__dirname": false,
},
devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
optimization: {
runtimeChunk: "single",
noEmitOnErrors: true,
splitChunks: {
cacheGroups: {
vendor: {
name: "vendor",
chunks: "all",
test: (module) => {
const moduleName = module.nameForCondition ? module.nameForCondition() : '';
return /[\\/]node_modules[\\/]/.test(moduleName) ||
appComponents.some(comp => comp === moduleName);
},
enforce: true,
},
},
},
minimize: Boolean(production),
minimizer: [
new TerserPlugin({
parallel: true,
cache: true,
sourceMap: isAnySourceMapEnabled,
terserOptions: {
output: {
comments: false,
semicolons: !isAnySourceMapEnabled
},
compress: {
// The Android SBG has problems parsing the output
// when these options are enabled
'collapse_vars': platform !== "android",
sequences: platform !== "android",
},
keep_fnames: true,
},
}),
],
},
module: {
rules: [{
include: [join(appFullPath, entryPath + ".js"), join(appFullPath, entryPath + ".ts")],
use: [
// Require all Android app components
platform === "android" && {
loader: "nativescript-dev-webpack/android-app-components-loader",
options: { modules: appComponents },
},
{
loader: "nativescript-dev-webpack/bundle-config-loader",
options: {
registerPages: true, // applicable only for non-angular apps
loadCss: !snapshot, // load the application css if in debug mode
unitTesting,
appFullPath,
projectRoot,
ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
},
},
].filter(loader => Boolean(loader)),
},
{
test: /[\/|\\]app\.css$/,
use: [
'nativescript-dev-webpack/style-hot-loader',
{
loader: "nativescript-dev-webpack/css2json-loader",
options: { useForImports: true }
},
],
},
{
test: /[\/|\\]app\.scss$/,
use: [
'nativescript-dev-webpack/style-hot-loader',
{
loader: "nativescript-dev-webpack/css2json-loader",
options: { useForImports: true }
},
'sass-loader',
],
},
{
test: /\.css$/,
exclude: /[\/|\\]app\.css$/,
use: [
'nativescript-dev-webpack/style-hot-loader',
'nativescript-dev-webpack/apply-css-loader.js',
{ loader: "css-loader", options: { url: false } },
],
},
{
test: /\.scss$/,
exclude: /[\/|\\]app\.scss$/,
use: [
'nativescript-dev-webpack/style-hot-loader',
'nativescript-dev-webpack/apply-css-loader.js',
{ loader: "css-loader", options: { url: false } },
'sass-loader',
],
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
allowTsInNodeModules: true,
compilerOptions: {
declaration: false
}
},
},
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compiler: NsVueTemplateCompiler,
},
},
],
},
plugins: [
// ... Vue Loader plugin omitted
// make sure to include the plugin!
new VueLoaderPlugin(),
// Define useful constants like TNS_WEBPACK
new webpack.DefinePlugin({
"global.TNS_WEBPACK": "true",
"TNS_ENV": JSON.stringify(mode),
"process": "global.process"
}),
// Remove all files from the out dir.
new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.+(jpg|png)" } },
{ from: { glob: "assets/**/*" } },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
// For instructions on how to set up workers with webpack
// check out https://github.com/nativescript/worker-loader
new NativeScriptWorkerPlugin(),
new nsWebpack.PlatformFSPlugin({
platform,
platforms,
}),
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
new nsWebpack.WatchStateLoggerPlugin()
],
};
if (unitTesting) {
config.module.rules.push(
{
test: /-page\.js$/,
use: "nativescript-dev-webpack/script-hot-loader"
},
{
test: /\.(html|xml)$/,
use: "nativescript-dev-webpack/markup-hot-loader"
},
{ test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" }
);
}
if (report) {
// Generate report files for bundles content
config.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: "static",
openAnalyzer: false,
generateStatsFile: true,
reportFilename: resolve(projectRoot, "report", `report.html`),
statsFilename: resolve(projectRoot, "report", `stats.json`),
}));
}
if (snapshot) {
config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
chunk: "vendor",
requireModules: [
"tns-core-modules/bundle-entry-points",
],
projectRoot,
webpackConfig: config,
snapshotInDocker,
skipSnapshotTools,
useLibs
}));
}
if (hmr) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
}
return config;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment