Help us test Webpack support in Ionic 2 App Scripts!

Ionic Framework ionic-v3
21

I think that’s a positive thing. The ecosystem wants to come up with new solutions to problems that might not be available in the stock toolkit. Remember ngrouter and uirouter?

The Angular CLI has been a long time coming and it’s not super stable yet. We decided early on that we didn’t want to rely on it being ready for what we needed, because then we risked waiting too long when we could have a solution right now. I feel validated in that given where the ng CLI is today.

That might change down the road, we keep an eye on it, but even then we’d probably use it under the hood like we do ngc.

22

Yep, I used the ionic-app-scripts webpack config just as I used the rollup config.
Anyway, I need Server Side Rendering and ionic-app-scripts doesn’t support it yet.

23

I appreciate that you have a desire to make things “just work” as best you can, but there are inevitably going to be last mile problems that there just isn’t any way you can solve in the general case. Without app developers having the ability to make at least some custom configuration, apps just can’t be built.

If you want concrete examples, until node-forge changes its packaging style, the recommended solution for using it with webpack involves declaring an alias and marking the module as noParse. In order to get node-uuid to work, I need to mark crypto as an external global.

1 Like
24

@jlcarv,

Are you using Universal? I’d love to chat more about that offline if so.

This is on our roadmap.

Thanks,
Dan

1 Like
25

@rapropos,

Understood. In that case, I see no reason you couldn’t use the custom config but keep our stuff in place and add your stuff to it.

I totally agree with you that developers need hooks, etc. Customization is essential to do this right as there are a million business cases we can’t account for.

To get started, we’re targeting the 80% of users that want something simple, and we’ll figure out the remaining 20% that need customization in the coming weeks.

Thanks,
Dan

26

Yes. I`m trying with this starter > https://github.com/angular/universal-starter.
How can we chat about this?

1 Like
27

I would love to be able to do that, but the only documentation I have seen involves replacing the config file wholesale. If I try copying node_modules/@ionic/app-scripts/config/webpack.config.js to the main project folder and use it by adding -w ./webpack.config.js to the “ionic-app-scripts build” line, webpack apparently fails, but there is no reported error and main.js is not built. I assumed that this was caused by relative paths finding the ionic-loader, so I tried rewriting that part. However, the only way I could figure out how to get any feedback was to run webpack manually (instead of via ionic build). In that case, the interpolated {{}} variables aren’t set up, so I had to replace those with hardcoded values. What I ended up with:

var path = require('path');

module.exports = {
  devtool: 'inline-source-map',
  entry: "./src/app/main.dev.ts",
  output: {
    path: './www/build',
    filename: 'main.js'
  },

  externals: {
    "crypto": "crypto"
  },

  resolve: {
    //modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.ts', '.json'],
    alias: {
      'node-forge': 'node-forge/js/forge.bundle.js'
    }
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: "ts"
      },
      {
        test: /\.json$/,
        loader: 'json'
      }
    ],
    noParse: [
      'node-forge'
    ]
  }
};

…and the following in tsconfig.json:

  "exclude": [
    "node_modules",
    "src/app/main.prod.ts"
  ],

…and in package.json:

  "scripts": {
    "build": "ionic-app-scripts build --dev -w ./webpack.config.js",

Ugly, I realize, but ugly >>>>> nonfunctional.

28

Sourcemaps is not working;

Also, barrels isn’t working properly.

29

@symphony86 I’m having the same problem. Where did you change the setting?

Ok, i made it to work by changing run:before to run:after

30

For testing see; https://github.com/lathonez/clicker

31

Hey @danbucholtz i’m starting to test the webpack config, i see you guys use different entry url depending on env, however in my case i have 3 entry points, pollyfils, vendor and the main one, i haven’t tested yet but if i use like this it should work right?:

module.exports = {
  devtool: 'cheap-module-source-map',
  entry: {
      'polyfills': './src/polyfills.browser.ts',
      'vendor': './src/vendor.browser.ts',
      'main': getEntryPoint()
  },
  output: {
    path: '{{BUILD}}',
    filename: 'main.js'
  },
...

Also what does that unknown loader called ionic-loader? i’ve looking at it but it doesn’t seems like doing anything else than dealing with cached files.

32

Ok so i’ve digged a bit more in how the new build process works, as i see now it works like this:

  1. Copy scripts.
  2. Transpilation (Ngc) and linting (Tslint) works both in parallel.
  3. If the Nr 2 goes ok, Webpack kicks in and bundle the transpiled files by Ngc.
  4. SCSS kicks in at last and do it’s thing.

So here’s my thoughts as frequent user of webpack:

  1. Most of you know that webpack is not just for bundling, right? the loaders it support allow a wide range of things including SCSS, linting and typescript transpilation (awesome-typescript-loader is the best in my opinion).

  2. Using one tool for all limits complexity, right?

  3. I think i understand why transpiling is a 2 step process, AoT requires that ngc goes through the files and generates factories or something like that from the ts files, isn’t a way to make it a 1 step process so we could use webpack alone and tell the ts loader to use ngc instead of typescript to transpiling? (i know we can tell awesome-typescript-loader to use ngc as the typescript instance to transpile, i tried that when AoT was still in alpha, however i didn’t understanded how AoT worked at that time).

  4. Using webpack in all steps allow some nice tricks like aliases, automatic conversion of angular’s styleUrl's into styles with requires, which turn into strings in the final build (basically inline styles in the component declaration), using plugins to provide global variables and libraries without parsing them or copying the libs files into the build folder, automatic html generation as well as service worker with automatic resource caching (offline mode without cache manifest, not that relevant in ionic’s case as it is an installed app, but it is when you deploy the same app in web and mobile like me).

So taking in account the previous list (mostly Nr 4) it would be great if webpack is used more than just for bundling.

Any thoughts in this @danbucholtz.

1 Like
33

The @ngtools/webpack loader - developed for the angular-cli - can take care of AoT and compiling typescript code in a single pass. I have an example here: mirkonasato/ionic2-webpack2-starter.

Incidentally livereload with the webpack-dev-server seems about 5 times faster than with ionic serve/app-scripts 0.0.37 when changing typescript code.

2 Likes
34

Wow great, then we could even make that change ourselves, we only need a way to ignore ngc and lint step and make those inside webpack, right?

35

I tried upgrading to webpack, and it seems to compile fine, but with ionic serve something seems broken?
It compiles, but then it does not start browser and the server. It just stops.

"C:\Program Files (x86)\JetBrains\WebStorm 2016.2\bin\runnerw.exe" C:\Users\xx\AppData\Roaming\npm\ionic.cmd serve --platform android --all --nolivereload

Running 'serve:before' npm script before serve

> x@ watch E:\Entwicklung\xx\Repo\xx
> ionic-app-scripts watch

[21:25:22]  ionic-app-scripts 0.0.37 
[21:25:22]  watch started ... 
[21:25:22]  build dev started ... 
[21:25:22]  clean started ... 
[21:25:22]  clean finished in 9 ms 
[21:25:22]  copy started ... 
[21:25:22]  transpile started ... 
[21:25:22]  lint started ... 
[21:25:29]  lint finished in 6.25 s 
[21:25:30]  transpile finished in 8.34 s 
[21:25:30]  webpack started ... 
[21:25:30]  copy finished in 8.60 s 
[21:25:42]  webpack finished in 12.37 s 
[21:25:42]  sass started ... 
[21:25:45]  sass finished in 2.26 s 
[21:25:45]  build dev finished in 23.09 s

… now the server and browser should be started, but even after 5 minutes it stil stops here.
All I did was upgrading app scripts to beta. No custom config.

Seems like “watch” does not go to “ready” state. Downgrading to 0.0.36 works well.

2 Likes
36

Make sure all these files exist. If they do not the watch hangs without any warnings.

{
  src: '{{SRC}}/assets/',
  dest: '{{WWW}}/assets/'
},
{
  src: '{{SRC}}/index.html',
  dest: '{{WWW}}/index.html'
},
{
  src: '{{SRC}}/manifest.json',
  dest: '{{WWW}}/manifest.json'
},
{
  src: '{{SRC}}/service-worker.js',
  dest: '{{WWW}}/service-worker.js'
},
{
  src: 'node_modules/ionic-angular/polyfills/polyfills.js',
  dest: '{{BUILD}}/polyfills.js'
},
{
  src: 'node_modules/ionicons/dist/fonts/',
  dest: '{{WWW}}/assets/fonts/'
},
1 Like
37

You GOT to be kidding, that’s too big of a flaw, how did you notice?

38

About an hour trying to figure out how to debug. ionic-app-scripts serve --debug then tracking down the line that pulls the watch params.

39

@alexthebuilder bro, i pay my respects to you :slight_smile: .

Anyway my current issue is that i tried to update my project today and i made it work, however the styles doesn’t work no matter what, it doesn’t even look like a production app, though in a new project seems to work ok.

40

Source map is also not working for me, even on a fresh new project. Is there any way to fix it?