Using ng-annotate loader with Webpack + Angular 1.x + ES6 classes + Babel

1) webpack.config.js

const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const config = {
    entry: {
        'app': './src/app.module.js',
        'vendor': './src/vendor.module.js'
    },
    devtool: 'source-map',
    output: {
        filename: 'libs/[name].bundle.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: ['ng-annotate-loader?ngAnnotate=ng-annotate-patched', 'babel-loader']
            },
            {
                test: /\.(scss)$/,
                use: ExtractTextWebpackPlugin.extract({
                    use: [
                            {
                                loader: "css-loader",
                                options: {
                                    minimize: true
                                }
                            },
                            {
                                loader: "sass-loader"
                            }
                    ]
                })
            },
            // for fixing of loading bootstrap icon files
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
                loader: 'url-loader?limit=10000',
                options: {
                    name: './fonts/[name].[ext]'
                }
            },
            {
                test: /\.(eot|ttf)$/,
                loader: 'file-loader',
                options: {
                    name: './fonts/[name].[ext]'
                }
            },
            { test: /\.html$/, loader: 'html-loader' }
        ]
    },
    plugins: [
        // new webpack.optimize.UglifyJsPlugin({
        //     comments: false,
        //     sourceMap: true,
        // }), // for mifiying js
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'libs/[name].bundle.js'
        }),
        new CleanWebpackPlugin('build'),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: '../index.html'
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        }),
        new ExtractTextWebpackPlugin('styles/styles.css'),
        new OptimizeCssAssetsWebpackPlugin()
    ],
    devServer: {
        port: 3000,
        contentBase: './src/',
        historyApiFallback: true
    }
};

module.exports = config;

2) package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --progress --open",
    "build": "webpack --progress",
    "watch": "webpack --watch --progress",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {},
  "keywords": [],
  "author": "Thach Nguyen",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.0",
    "html-webpack-plugin": "^2.30.1",
    "ng-annotate-loader": "^0.6.1",
    "ng-annotate-patched": "1.7.0",
    "node-sass": "^4.5.3",
    "optimize-css-assets-webpack-plugin": "^3.0.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.2.0",
    "webpack-dev-server": "^2.5.1"
  },
  "dependencies": {
    "angular": "^1.6.5",
    "angular-animate": "^1.7.3",
    "angular-aria": "^1.7.3",
    "angular-material": "^1.1.1",
    "angular-sanitize": "^1.6.5",
    "angular-ui-router": "^1.0.3",
    "font-awesome": "4.7.0",
    "jquery": "^3.2.1",
    "popper.js": "^1.14.3",
    "trix": "^0.12.0"
  }
}

3) architecture

- build
- src
  - common
  - components
  - pages 
  - styles.scss
  - vendor.modules
  - index.html
  - app.module.js
  - app.component.js
  - app.component.html
- webpack.config.js
- package.json

4) App Component

--- app.component.html ---
   <div layout="column">
    <app-header></app-header>
    <ui-view></ui-view>
   </div>
   
--- app.component.js ---
  import template from './app.component.html';
  export default {
      template
  }
  
--- app.component.module ---
import 'jquery';
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import angularMaterial from 'angular-material';
import AppComponent from './app.component.js';
import Common from './common';
import Components from './components';
import Pages from './pages';

import './styles.scss';

angular.module('app', [
  uiRouter,
  angularMaterial,
  Common.name,
  Components.name,
  Pages.name
])
.component('app', AppComponent);

5) vendor.module.js

/**
 * Load all 3rd party imports here so it'll be
 * directly included in vendor.bundle.js file.
 */
// import 'jquery';
import 'angular';
import 'popper.js';
import 'angular-ui-router';
import 'angular-material';
import 'trix';

6) index.html

<html ng-app="app" lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-cloak>
  
  <app></app>
  
</body>
</html>