Minification with AngularJS and Webpack 2

Question

I want to concatenate a list of js files that contains my angularjs code and uglify it. I want to concatenate it in an ordered manner to avoid "that .... is not defined" errors.

I also have some libraries downloaded from github and placed in a "lib" folder. I want to concatenate those libraries in vendor.bundle.js.

This is the folder structure:

/app
    /feature1
        feature1.controller.js
    /feature2
        feature2.controller.js
    /...
    app.module.js
/libs
    /angular
        angular.min.js
    /angular-ui-router
        angular-ui-router.min.js
    /angular-material
        angular-material.min.js
        angular-material.min.css

    /...
app.js
vendor.js

Inside of app.js I have this:

require('./app/app.module.js');
require('./app/feature1/feature1.controller.js');
require('./app/feature2/feature2.controller.js');
...

Inside vendor.js I have this:

require('./libs/angular/angular.min.js');
require('./libs/angular-ui-router/angular-ui-router.min.js');
require('./libs/angular-material/angular-material.min.js');
require('./libs/angular-material/angular-material.min.css');
...

And this is the webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    context: __dirname,
    entry: {
        app: "./app.js",
        vendor: "./vendor.js",
    },    
    output: {
        path: path.resolve(__dirname, "app"),
        filename: "app.bundle.js"
    },
    module: {
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename:"./app/vendor.bundle.js"
        }),
        new UglifyJSPlugin({
            compress: true,
            sourceMap: false,
            mangle: true
        })
    ]
};

The result of this config is that the concatenation inside app.bundle.js is not ordered, so there are function not defined etc...

And the vendor.bundle.js is not created because it generate a lot of errors.

Which is the correct way to do the minification with splitted personal code and vendor code?

there is an angular loader for webpack which does this, but it needs modules per js files for it to work — harishr, Apr 13 '17 at 08:17

score 3 · Answer 1 · edited May 30 '17 at 02:13

3

Have you tried doing this natively with the command wepack -p?

If it does not work you can try modify Uglify to:

new UglifyJSPlugin({
    compress: true,
    sourceMap: false,
    mangle: false // modified
})

edited May 30 '17 at 02:13

ByteNudger

1,545
5
29
37

answered May 29 '17 at 22:53

Fábio Miranda

31
5

score 1 · Answer 2 · answered Oct 05 '17 at 09:58

1

The answer from @Fábio Miranda is correct, but if you want to mangle you files anyway for performance, in case you are using gulp, you could achieve this using this plugin

cheers

answered Oct 05 '17 at 09:58

elverde

193
2
7

This is not a answer to the question. Add a comment if you will. – Ralf de Kleine Nov 22 '18 at 13:27
Maybe you're right. In any case, it is more helpful than yours, don't you think? – elverde Nov 23 '18 at 06:59
That's actually the right answer. The minification process of Webpack, is changing the variable names inside the functions (Modules, Factories, Services, Directives and Component Etc..) And because Angular is dependent on the naming of the parameters, Webpack is breaking angularjs. So ng-Anotate is actually the correct way of solving this. More on this solution could be read here: https://stackoverflow.com/questions/17238759/angular-module-minification-bug – Stas Arshanski May 19 '19 at 05:03

score 1 · Accepted Answer · answered Jan 20 '18 at 13:39

1

I solved this requiring files in a tree way. I used app.module.js as entry point, then in app.module.js I required the controller's files before injecting them. In this way webpack will require the files in the right order.

answered Jan 20 '18 at 13:39

retrobitguy

535
1
6
18

Minification with AngularJS and Webpack 2

3 Answers3