Moving Angular 2 module loader from SystemJS to Webapack

Question

I am developing a AngularJS application, I am currently using SystemJS for module loading. I was only aware that there is Webpack after some time I have started with the project. And I also wanted to understand what module loading is, I have my project as the following tree:

-client
    -app
       -components
       -models
       -modules
       *app.--.ts (app level ts files) eg. app.module.ts
    -bower_components
    -node_modules(client side packages)
    -js,styles,images (assets directories, same level in tree)
    -typings
    -index.html
    -package.json
    -systemjs.conf.js
    -tssonfig.json
    -typings.json
-server
-node_modules(server side packages)
-packages.json
-server.js
-.bowerrc

Now that I see google had moved to Webpack, i would also like to use Webpack. I am aware of the Angular CLI, I have tried it and I was successful.

So do I have to create a new CLI project and then migrate my files to that project?

If I do that, which configuration files do I have to specificly look at that will affect the running of my application with Webpack?

And if I would continue using systemJS, is it a tool that does most of the things done by Webpack?

Or is there a better way to do this, I seek advice on how to do the migration the right and best way? I am still a learner and would appreciate any help.

Let's say I only want to use Webpack without CLI, do I need only the webpack.config.js and delete the systemjs.config.js file and remove the following in the index.html

<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

And because I currently have third party libraries that I use with systemjs like

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js',
  'ng2-page-scroll/ng2-page-scroll': 'npm:ng2-page-scroll/bundles/ng2-page-scroll.umd.js'

Will it be easy for me to include these with Webpack, are they touching on using third party libraries in the Webpack official website?

Thank you.

Answer 1

Here are a few answers that might help...

So do I have to create a new CLI project and then migrate my files to that project?

Using Webpack and using angular-cli are both similar and different at the same time. CLI leverages Webpack to load all of the modules you are using while developing your application and then packs them together for production use. CLI also makes it really easy for you to use AOT compilation. You do not have to create a new CLI project unless you want to use all of the functions that angular-cli.

If I do that, which configuration files do I have to specificly look at that will affect the running of my application with Webpack?

I think you are referring to the webpack.config.js, webpack.dev.js and webpack.prod.js files. Something that is not really explained is that all three files could essentially be one file, they are split up because it makes more sense that all of the general configuration settings for prod/dev are in webpack.config.js, all of the prod only configurations are in webpack.prod.js and all of the dev only configurations are in webpack.dev.js.

These files are equivalent to the systemjs systemjs.config.js or whatever you have named it.

And if I would continue using systemJS, is it a tool that does most of the things done by Webpack?

Webpack, from my experience, is more developed and mature compared to SystemJS but that does not mean that SystemJS cannot do the majority of things that Webpack does. I have found that Webpack does a better job at bundling/minifying the overall project. You could technically use SystemJS for dev and Webpack for production or vice versa but honestly, just stick with using one or your project becomes convoluted with unnecessary code.

My Final Thoughts

I recommend angular-cli/webpack only because it makes the development process much easier and quite a bit faster. If you have yet to make a lot of progress on your project then making the switch to angular-cli should be really easy and definitely worth it. If you are pretty far (my project spans over 6 months of development and I am finally converting it to webpack) then it would not hurt for you to move to Webpack, assuming you feel comfortable doing the migration.

In all reality, if you are comfortable using SystemJS then just stick with it unless you want to make your processes more efficient. With that, I would recommend looking into system-builder to minify your project.