Require.js can't recognize modules in concatenated JS file

Question

I am integrating Require.js to AngularJS based web application for performance improvement. I've imported require.conf in index.html:

<script src="bower_components/requirejs/require.js" data-main="require-conf.js">

Here is code snippet of require-conf.js:

    require.config({
            paths: {
                    'jquery': '...', 
                    'Angular': '...',
                    ....
                    'libs' : 'src/libs.js'
            },
            shim: {
                    'Angular': { exports: 'Angular'},
                    'libs' : ['Angular']
                    .... 
            }
    }

   require(
         [
              'jquery',
              'angular',
              'app',
              'libs',

          ], function (jquery, angular) {
            angular.bootstrap(['app'])
        }
     );

Here, libs.js is the library I've built by webpack. Some plugins and libraries are concatenated in this file. Here is webpack configuration code snippet to build libs.js.

In webpack.config.js

plugins: [
    new ConcatPlugin({
      fileName: 'libs.js',
      filesToConcat: [
        './src/utils/bootstrap-plugins.min.js',
        './src/libs/angular-bootstrap-datetimepicker/datetimepicker.js',
        './src/libs/angular-bootstrap-datetimepicker/datetimepicker.templates.js',
        './src/libs/angular-fusioncharts/fusioncharts.js',
        './src/libs/angular-fusioncharts/angular-fusioncharts.min.js',
        './src/libs/angular-fusioncharts/types/fusioncharts.charts.js',
        './src/libs/angular-ui-tour/angular-ui-tour.js',
        './src/libs/JQ_CONFIG/flot/jquery.flot.js',
        './src/libs/JQ_CONFIG/flot/jquery.flot.pie.js',
        './src/libs/JQ_CONFIG/flot/jquery.flot.resize.js',
        './src/libs/JQ_CONFIG/flot-spline/js/jquery.flot.spline.min.js',
        './src/libs/JQ_CONFIG/flot.orderbars/js/jquery.flot.orderBars.js',
        './src/libs/JQ_CONFIG/flot.tooltip/js/jquery.flot.tooltip.min.js',
        './src/libs/JQ_CONFIG/footable/dist/footable.all.min.js',
        './src/libs/JQ_CONFIG/html5sortable/jquery.sortable.js',
        './src/libs/jquery-ui-draggable/jquery-ui-draggable.min.js',
        './src/libs/ng-table/ng-table.js',
        './src/libs/StickyTableHeaders/jquery.stickytableheaders.js',
        './src/libs/ng-quill/quill.js',
        './src/libs/ng-quill/ng-quill.js',
      ].map(function(fileName) {
        return path.resolve(__dirname, fileName);
      }),

But, App can't recognize the modules inside libs.js:

Module 'ngquill' is not available! you either misspelled the module name or forgot it to load it. If registering a module ensure that you specify the dependencies as the second argument.

Require.js can't recognize the modules concatenated by webpack? Is there any solutions to fix this problem?

Answer 1

You cannot combine AMD modules into a single file just by concatenating them into a single file. When you combine multiple modules into a single file, the modules must get hardcoded names. When you have a single module in a single file, the define for it can be:

define([ ... deps ... ], function (...) {

In this case, RequireJS infers the name of the module from the name under which it was requested.

When you combine multiple modules in a single file, the define calls must be of the form:

define("foo", [ ... deps ...], function (...) {

define("bar", [ ... deps ...], function (...) {

// etc.

The first argument to define is a string, which tells RequireJS which module is being defined. This is necessary because otherwise RequireJS won't know which module is which. This is why you cannot just concatenate.

You most likely could write a Webpack configuration that could both transform the files as I described above and concatenate them. However, that's rife with hurdles. For instance the runtime shim configuration require special handling at build time. In the end you may end up replicating the functionality of RequireJS' optimizer. I would suggest using RequireJS' optimizer instead of reinventing the wheel.