How to properly split an Angular application by files?

Question

JavaScript

Good evening!
How will it be more competent to split an Angular 1.x application into files and directories, so that webpack or browserify can then glue them together?
Option 1 - import function (array):

/**
 * app.js
 */
const MainCtrl = require("./controllers/mainCtrl.js")

const App = angular.module('App', []);
App.controller('MainCtrl', MainCtrl);

/**
 * mainCtrl.js
 */
module.exports = [
    '$scope',
    ($scope) => {
        // code ...
    }
]

Option 2 - module transfer:

/**
 * app.js
 */
const App = angular.module('App', []);

require("./controllers/mainCtrl.js")(App);

/**
 * mainCtrl.js
 */
module.exports = function (App) {
    App.controller('MainCtrl', [
        '$scope',
        ($scope) => {
            // code ...
        }
    ]);
};

Option 3 - passing the module name:

/**
 * app.js
 */
const App = angular.module('App', []);

require("./controllers/mainCtrl.js")('App');

/**
 * mainCtrl.js
 */
module.exports = function (moduleName) {
    const App = angular.module(moduleName);

    App.controller('MainCtrl', [
        '$scope',
        ($scope) => {
            // code ...
        }
    ]);
};

Answer 1

angular-tips.com/blog/2015/06/using-angular-1-dot-...
https://github.com/johnpapa/angular-styleguide

Answer 2

Here is a ready-made example with ES6: https://github.com/gothinkster/angularjs-realworld...