Help us test Webpack support in Ionic 2 App Scripts!

Ionic Framework ionic-v3
41

Great move to webpack. :relaxed:

Are there any improvements planned on the build time? The live reload takes from 5 to 20 seconds after a typescript file modification.

42

Yes, we are actively working on improving build times. Right now we arenā€™t doing incremental builds with Webpack and that is the cause of some slowness. We are working on figuring out how to make all of that work.

Thanks,
Dan

43

Hey folks!

Ok, so right to the point. Iā€™ve been using the new (0.0.37) version of app scripts for about 3 days now and overall it seems to work as well (not as well as the builds from beta 11, mind you, but still good enough). A few issues that Iā€™ve come across;

  • When first running ionic serve the web server does not start. This is mentioned in this comment. I have to edit a file in my project, and then the ā€œwatchā€ fires and the web server starts.
  • After about 5-6 edits, it seems as though a cached version of my templates are served up. There no errors in the cli or the browser consoleā€¦ itā€™s just old templates. This happens randomly though, as I canā€™t reliably dupe it.
  • Occasionally I will save and Iā€™ll get the white screen of death. If I refresh the browser the page will load. From what Iā€™ve seen, this typically happens if I have an error in one of my templates.

Hope that helps, and keep up the good work! I lost roughly 12 hours of my life meandering through Rollup issues, so Iā€™m glad to see webpack make a comeback; hopefully it can satisfy the performance needs while also placating the community.

2 Likes
44

I just migrated to using webpack today. And most things worked out-of-box (Thank you Ionic Team!).

But there was one thing that I couldnā€™t make it work.

Some libraries (old) require shimming via ProvidePlugin in webpack but since customizing webpack.config.js isnā€™t recommended just yet, I couldnā€™t make it work with these libraries.

Am I missing something here (perhaps some kind of hook if full-blown write-up of config file isnā€™t desirable?) or is this just not supported yet?

45

@danbucholtz The build times definitely is not a big issue. The current build time is acceptable. I think that the team need to focus on bug fixes, like ionic serve, sourcemaps ā€¦ Now itā€™s impossible do debug with chrome with webpack.

46

YESSSS !!!

Fantastic, I managed to integrate the third library Pixijs V4 with the new version of ionic-app-scripts.
Before with app-scripts 0.0.36, it was impossible for me, many errors ! Iā€™m going crazy :slight_smile:

Thanx a lot at Ionic Team

47

ionic serve results for me to

[15:36:25]  lint finished in 2.91 s 
[15:36:26]  transpile finished in 4.73 s 
[15:36:26]  webpack started ... 
[15:36:26]  copy finished in 4.89 s 
[15:36:35]  webpack finished in 9.06 s 
[15:36:35]  sass started ... 
[15:36:37]  sass finished in 1.52 s 
[15:36:37]  build dev finished in 15.33 s

and after that nothingā€¦ it just hangs and no watch started

48

@Cleever I would disagree the build time is not a big issue. Itā€™s a lot slower than with Ionic 1, and itā€™s a lot slower than typical Angular 2 projects. In other words, itā€™s not what many people have come to expect.

1 Like
49

@mirkonasato of course, I canā€™t disagree with you, but I thing they should fix others things ā€œfirstā€, issues that block and disturb all developing process( like an endless ionic serve or a lack for sourcemaps) .

50

nop same for me, I havz set the "emulate: before" to "watch" for having livereload done. But iā€™m still using rollup from RC0ā€¦

I also changed the build script to use the flag : ā€œdevā€ for speeding up the compilation.

"build": "ionic-app-scripts build --dev"
51

Sorry for the late replyā€¦ hope you found the solution by nowā€¦ either way, you can change the setting in package.json under ā€œscriptsā€ command listā€¦

52

I am happy with webpackā€¦ .

rollup has been causing me a hell of troubles on importing external modules. I have not been able to bring up my apps for ~3 weeks until webpack came back.

please do ship with webpack as the default.

thanks very much,

1 Like
53

@mirkonasato @Cleever @danbucholtz I think that the developer experience could be much better with a fast build reload time. This RC is already pretty goodā€¦ with some bugs but that is a part of the game.
By the way, the team has done a great jobā€¦ the documentation is pretty neat but IMO the build time is a real PITA :confused:
Keep going!

@mirkonasato I tested your webpack starter :thumbsup: I have made the same move for a new project, by using the popular angular2-webpack-starter.

3 Likes
54

I have a ionic2 meteor project, based on this tutorial https://www.angular-meteor.com/tutorials/whatsapp2/ionic/setup

Everything worked fine until Ionic2 beta 11, but now I canā€™t figure out how to make it work in Ionic 2 RC, I get many import errors anytime I try to import Meteor related stuff. Key packages I need to import from are :



But when I try to include them I get errors such as :
[02:06:08] bundle failed: Illegal reassignment to import ā€˜commonjsHelpersā€™
[02:06:08] ionic-app-script task: ā€œbuildā€
[02:06:08] Error: Illegal reassignment to import ā€˜commonjsHelpersā€™

All my other projects which are REST API based work perfectly with latest Ionic 2 Release, but on this project I really need the realtime features of meteor.

Any ideas of whatā€™s wrong ?

55

Does that mean we will be able to add custom steps in the middle of the build for instance like converting jade templates to html before you do anything with them ? Or will it be limited to things already anticipated ?

56

@jdat82,

Yes, that is the plan. I am thinking that we will provide pre and post build hooks, and then pre and post bundle hooks. As long as the functions return a promise, everything should just work.

@Marwan22,

Can you try using our new Webpack build? It might work better. Try running the following command.

npm install @ionic/app-scripts@beta

If you have an existing custom Rollup config file, can you remove it from the package.json temporarily when testing?

@cleever,

Source maps should be kind of working in the new beta. We are using Webpack source maps right now. We do have access to a much better source map saved on disk. Weā€™re fighting a bit with Webpack 2 trying to get it to work and sync up. This would be a better source map that tracks all the way back to the Typescript, so it is the ideal solution.

Thanks,
Dan

1 Like
57

Good morning Ionites!

We have released beta 2 of Webpack support. It uses an incremental build to be much faster. I am seeing build times between 2.5 and 3 seconds on average when running ionic serve.

To test it, please run

npm install @ionic/app-scripts@beta

Please let us know how it goes. We are still actively working on this.

Here whatā€™s up next for us:

  1. General stability improvements
  2. Utilize better source maps
  3. Figure out why the json-loader is not working correctly
  4. Create a production webpack config (compare with Angular CLI and create-react-app)

After that stuff is in place, we need to do the following:

  1. Add hooks into build process
  2. Improve minification story for prod builds
  3. Improve tree shaking
  4. See what we can do to improve ngc error messages, etc.

Thanks,
Dan

3 Likes
58

Thanks @danbucholtz! Good job.

Attention:

For everyone that is having ionic serve issues like freezing in build dev finished in. You need to put the manifest.json file inside src folder. This beta release get crazy if this file is missing.

This manifest file was not present in my environment because Iā€™m not working in PWA right now. However, this is small workaround put my ionic serve working again.

59

Cannot read property ā€˜prototypeā€™ of undefined after running app :frowning:

60

Works fine here, rebuild time after a ts change is ~3 seconds with 0.0.37-2, compared to ~5 with 0.0.37. For projects generated with the Angular CLI itā€™s ~1.8s on my machine.