title: Minification with AngularJS and Webpack 2
body: <p>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.</p>
  
  <p>I also have some libraries downloaded from github and placed in a "lib" folder. I want to concatenate those libraries in vendor.bundle.js.</p>
  
  <p>This is the folder structure:</p>
  
  <pre><code>/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
  </code></pre>
  
  <p>Inside of app.js I have this:</p>
  
  <pre><code>require('./app/app.module.js');
  require('./app/feature1/feature1.controller.js');
  require('./app/feature2/feature2.controller.js');
  ...
  </code></pre>
  
  <p>Inside vendor.js I have this:</p>
  
  <pre><code>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');
  ...
  </code></pre>
  
  <p>And this is the webpack.config.js:</p>
  
  <pre><code>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
          })
      ]
  };
  </code></pre>
  
  <p>The result of this config is that the concatenation inside app.bundle.js is not ordered, so there are function not defined etc...</p>
  
  <p>And the vendor.bundle.js is not created because it generate a lot of errors.</p>
  
  <p>Which is the correct way to do the minification with splitted personal code and vendor code?</p>