Enhancement: Allow for multiple entries in our webpack config

[luchillo17]

Short description of the problem:

In webpack 1 & 2 you could just specify multiple entry points to be processed like this:

entry: {

      'polyfills': './src/polyfills.browser.ts',
      'vendor': './src/vendor.browser.ts',
      'main': './src/main.dev.ts'

},

However the output with ionic-app-scripts@beta is the following:

What behavior are you expecting?

I expect webpack to let me specify multiple entry points and produce multiple output files.

Steps to reproduce:

1. Create new project as ionic start buildTest sidemenu --v2 --ts with [email protected] cli installed.
2. Update to @ionic/[email protected] for webpack support.
3. Copy the webpack basic config with command mkdir config && cp node_modules/@ionic/app-scripts/config/webpack.config.js config/.
4. Add webpack config to package.json config as specified here: ionic-app-scripts#npm-config ionic-app-scripts#overriding-config-files
5. Edit config/webpack.config.js entry property to the presumably equivalent one like this:

entry: {
    'main': getEntryPoint()
},

Which @ionic/app-scripts version are you using?
Using @ionic/[email protected] with custom webpack config.

[jgw96]

Hello, thanks for opening an issue. This is most likely failing because we mainly use webpack for watching and bundling and not all of the other features it provides. We are contemplating how much of webpack to use in our app-scripts, but in the meantime if you are looking to implement a fully custom webpack build you may be better off building it from scratch instead of trying to implement it on top of app-scripts. I am going to leave this issue open as the team discusses how much of webpack we want to use.

[luchillo17]

I'm in the process, however i would loss the ionic serve and ionic run android command, wouldn't that mean i would have to implement those by myself?

[luchillo17]

Well ionic serve wouldn't be a big deal, but the issue is ionic run since idk what it does under the hood with adb for android and xcode for ios.

[msegers]

Hi, I'm actually building the scss files as separate files at the moment (wp/ios/md), this is something I do using the entry points.

I could see if I could get it to work by require-ing instead but this is also breaking my existing app as well.

[danbucholtz]

We may do this with the multiple entry points down the line but I doubt it will happen in the short term. I wouldn't plan on it as it's not presently on our roadmap.

Thanks,
Dan

[msegers]

Understandable, I still have issues getting anything working with webpack and these scripts. If I find out how or anyone has an idea, let me know!

[BahgatMashaly]

Dear @danbucholtz ,
Before using rollup it was easy to deal with multiple entries in webpack , kindly gave us a simple solution to avoid replace file path with ionic-app-scripts if we use custom webpack.config.js ,
cos it's easy to config paths in our webpack.config.js .

why multiple entries is important ?

• with hybrid application i can update my application without upload new app versions to the app store or market. it's like IBM MobileFirst direct update
  http://www.ibm.com/support/knowledgecenter/SSHS8R_6.3.0/com.ibm.worklight.dev.doc/admin/c_direct_updates_app_versions_to_mob.html

i have finished a mobile server which can do direct update like MobileFirst server,
so i need to split javascript code to two files , one for my application code and the other for all third party library like (ionic-angular ......) ,to help me to update my code only it will be more fast than update all javascipt code.

if ionic team think to include direct update technic and mobile server services , it will be my pleasure to work with ionic team.

[danbucholtz]

Sorry, this is outside of the scope of what we intend to support. Perhaps in the future.

Thanks,
Dan

[danicomas]

@danbucholtz I think it should be. We should reduce the time when we are developing(web worker is nice but not enough) and the way to do this is not generating the bundle with vendors every time we change our code. We only want to change our code not all the bundle.

To do this in my other @angular web projects I used systemjs and systemjs-builder you can check it out.

@luchillo17 @jgw96 @msegers @BahgatMashaly @mlynch

Regards,

[luchillo17]

Not only that but tweaking the config to use DLL's would speed a WHOLE lot the compilation duration, such thing works best if we could configure better the entries for webpack.