Using webpack with angular.1.5 , php and bower

Question

my index.php is like the following :

<script src="app/bower_components/jquery/dist/jquery.min.js"></script>
<script src="app/bower_components/angular/angular.min.js"></script>
<script src="app/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/bower_components/angular-sanitize/angular-sanitize.min.js"></script>

I would like to add webpack to bundle all these files and minify them I did not find the way to do that.

I have installed npm , node and webpack I manged to us webpack to simple files like: webpack entry.js bundle.js . but not for my angular app

Answer 1

Let me answer it in general and then specific to your use case.

IN GENERAL:

Webpack

• is a module bundler
• needs entry and output as minimum configuration

Where do i configure/list-out all my application code?

You dont configure it but code it. Please read on...

How webpack knows what code/modules to pick up to bundle?

Webpack will look at the code configured for entry and then internally builds its module dependencies (as dependency graph).

How do you declare module dependencies?

In short: by using require("module-or-path-here") or import "module-or-path-here". Do note that the javascript (ES6 a.k.a ES2015) itself has native module support now. Here is a good article on JS modules.

What is dependency graph?

Webpack will start with the code configured for entry and then pick up its immediate dependencies. It then goes to find out the dependencies of those immediate dependencies and so on...

Once the dependency graph is complete, webpack will start processing them and bundle them into output.filename located at output.path

Fine, but i want to perform some resource (JS / CSS / SCSS / images, etc..) specific work for ex. minify js code. How to do that?

Webpack is flexible (and powerful) and allows to configure resource specific work via loaders and plugins.

IN SPECIFIC:

The modules in AngularJS (i.e. 1.x) are not same as the modules that webpack works with. As you can see, while declaring the modules in angularJS, you are defining modules with angular by calling angular.module.

One option is to make sure to bundle all your angular module definition files (i.e that consists of angular.module("module-name-here", ["depenndencies"])) first followed by the angular components that needs those modules. There are several way to do that. For ex. name all your angular modules declaration files with a common pattern and then configure webpack to pick them up first.

Minification is pretty simple to achieve with webpack. You can try one of the options pointed out in the webpack documentation.