feat(config): add command line flag to disable minifyJs on prod build

[elevente]

Short description of what this resolves:

I added a command line flag(--noMinifyJs) to disable minifyJs on prod build, so we can use the uglifyJs plugin in webpack config and generate a sourcemap file which is correct. Issue: #856

Changes proposed in this pull request:

• add --noMinifyJs command line flag

[DavidStrausz]

@elevente very nice :) I tested your PR combined with a custom webpack config (with uglifyjs plugin: new webpack.optimize.UglifyJsPlugin({ sourceMap: true })) and ionic_generate_source_map set to true. Works very well when doing a production build like this: ionic build android --prod --noMinifyJs. Sentry is now able to map production errors correctly.
Also interesting: The size of my main.js bundle increased by 35KB. Maybe the uglifyjs webpack plugin needs to be configured differently.

BR
David

[larssn]

@DavidStrausz try {compress: true, sourceMap: true}

[DavidStrausz]

@larssn thanks but no difference -> compress is enabled by default according to the plugin docs.

[larssn]

Ah, you're right

[larssn]

I'm a bit quick on the trigger these days. Removed the code I posted, as it doesn't work.

Might as well dump the entire custom webpack config, as that does work. Maybe someone will get use from it.

var path = require('path'); var webpack = require('webpack'); var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); console.log('-------------- CUSTOM WEBPACK CONFIG --------------'); var plugins = [ ionicWebpackFactory.getIonicEnvironmentPlugin() ]; if (process.env.IONIC_ENV === 'prod') { plugins.push(new UglifyJSPlugin({ compress: true, sourceMap: true })); } module.exports = { entry: process.env.IONIC_APP_ENTRY_POINT, output: { path: '{{BUILD}}', publicPath: 'build/', filename: process.env.IONIC_OUTPUT_JS_FILE_NAME, devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(), }, devtool: process.env.IONIC_SOURCE_MAP_TYPE, resolve: { extensions: ['.ts', '.js', '.json'], modules: [path.resolve('node_modules')] }, module: { loaders: [ { test: /\.json$/, loader: 'json-loader' }, { test: /\.ts$/, loader: process.env.IONIC_WEBPACK_LOADER } ] }, plugins: plugins, // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. node: { fs: 'empty', net: 'empty', tls: 'empty' } }; 

[danbucholtz]

Sorry, this is more overhead for us that at this time we don't wish to take on.

A prod build consists of:

1. AoT (--aot)
2. Optimizations (--optimizejs)
3. minify JS (--minifyjs)
4. minify CSS (--minifycss)

You can add those options to ionic build to do a custom prod build.

Thanks,
Dan

[larssn]

@danbucholtz Going back to this. How would we get around not using --prod; because using the above doesn't set IONIC_ENV to prod.

May I suggest going forward, that we can somehow customise what exactly is part of a prod build? Something like:

prod: { aot: true, optimizejs: true, minifyjs: false, minifycss: true } 

[clarkmcnally]

Is --noMinifyJs still included in the latest ionic/app-scripts? I don't see it in the source code

[clarkmcnally]

I also have noticed that my source maps in sentry are broken on 3.1.* but work on 3.0.1